Question

我有一个动态创建的jquery draggable div，里面有一个嵌套的jquery可调整大小的div。

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

我可以拖动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/

Answer 2

请看一下

http://jsfiddle.net/ARc7G/29/

在决赛中，我添加了

$("#span"+i).css('color','red');

外部jquery draggable / resizable div不允许我选择内跨的文本

2 个答案: