javascript - 外部 jquery 可拖动/可调整大小的 div 不允许我选择内部跨度的文本

Question

我有一个动态创建的 jquery 可拖动 div，其中有一个嵌套的 jquery 可调整大小的 div。

在可调整大小的 div 内，我有一个嵌套的范围，里面有一些文本。

我可以拖动 div 并调整其大小。

我希望能够选择范围内的文本，但父 div 阻止我这样做。

我可以单击文本并调用警报，但仍然无法突出显示文本。

我是否遗漏了一些明显的东西？

我创建了一个 jsfiddle，以便您可以看到它的运行情况。

您可以调整框的大小并拖动框，如果单击文本，您会收到警报，但无法选择文本

http://jsfiddle.net/ARc7G/28/

非常感谢任何帮助，因为我正在撕扯我的头发

这是代码 JavaScript

  function createtextbox(i, id, top, left, width, height, content,zindex,borderwidth,borderstyle,bordercolor,padding) {
id = id + i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('iterate', i);
newdiv.style.position = "absolute";
newdiv.style.top = top + "px";
newdiv.style.left = left + "px";
newdiv.style.borderWidth = "1px";
newdiv.style.cursor = 'move';
newdiv.style.zIndex = zindex;
newdiv.innerHTML = "</div><br><div id='div" + i + "' name='textarea[" + i + "]'  class='textarea1' style='padding:"+padding+"px; border-width:"+borderwidth+"px; border-style:"+borderstyle+";  border-color:"+bordercolor+"; width:"+width+"px; height:"+height+"px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;'><span id='span" + i + "'>" + content + "</span></div>";
var htmlData = $('#' + i).html();
newdiv.innerHTML = newdiv.innerHTML + "<br><input name='contents[" + i + "]' type='hidden' value='" + content + "'/>";
newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='" + i + "' name='id[" + i + "]'><br><input name='box_type[" + i + "]' type='hidden' value='text'/>";
newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='" + width + "' name='width[" + i + "]' id='width" + i + "'><br><input type='hidden' value='" + height + "' name='height[" + i + "]' id='height" + i + "'>";
newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='" + left + "' name='left[" + i + "]' id='left" + i + "'><br><input type='hidden' value='" + top + "' name='top[" + i + "]' id='top" + i + "'>";
document.getElementById("frmMain").appendChild(newdiv);

var top_button_left_pos = -75;
var spanclick = document.getElementById('span' + i);
spanclick.onclick = function (e) {       
    alert("hello world");
};


$(function () {
    $("#div" + i).resizable({
        autoHide: true
    });
    $("#div" + i).resizable({           
    });

    $("#" + id).draggable({           
    });
});
}


createtextbox('1', 'draggable', '15', '15', '300', '300', 'newtextarea','1','1','solid','#000000','3');

html

 <form id="frmMain" name="frmMain" enctype="multipart/form-data" method="post">
  <div id="content"></div>
 </form>

Answer 1

好吧，不要阻止默认值(这毕竟是您需要选择的)并处理鼠标按下而不是单击(我是对的，单击触发得太晚了):

spanclick.onmousedown = function (e) {
    e.stopPropagation();
};

同时重置它从可拖动 div 继承的光标样式，然后就可以开始了。

参见:http://jsfiddle.net/ARc7G/31/