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

Posted 2023-05-08

【中文标题】外部 jquery 可拖动/可调整大小的 div 不允许我选择内部跨度的文本

【英文标题】：outer jquery draggable/resizable div's not allowing me to select text of inner span

【发布时间】：2013-05-08 10:08:48

【问题描述】：

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

【问题讨论】：

似乎单击事件已经太晚了，无法阻止拖动（因为它在鼠标上，我怀疑可拖动正在使用向下）。一会试试看

【参考方案1】：

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

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

同时重置它从可拖动 div 继承的光标样式，一切顺利。

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

【讨论】：

Damyan，我已经更新了 jsfiddle，因为我试图将选定的文本包装在粗体标签中。 jsfiddle.net/ARc7G/32你能看出我哪里出错了吗，谢谢

是的，它是一个跨度（不是实际的 textarea 标签），因此该值不是可见文本。使用 .html() 代替 jsfiddle.net/ARc7G/36 :)

【参考方案2】：

请看一下

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

在决赛中，我加了

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

【讨论】：

您仍然无法用鼠标突出显示文本。我需要的是能够选择文本