2

我有一个动态创建的 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>
4

2 回答 2

2

好的，不要阻止默认值（毕竟这是您需要选择的）并处理鼠标向下而不是单击（我是对的，单击触发太晚了）：

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

还重置它从可拖动 div 继承的光标样式，你很高兴。

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

于 2013-05-14T08:26:42.113 回答
0

请看一下

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

在决赛中，我补充说

$("#span"+i).css('color','red');
于 2013-05-14T08:19:19.050 回答