Javascript 如何使一个div甚至可以从一个文本区域拖动？

我正在尝试创建一个可拖动的div，它也可以从其中的文本区域拖动

html:

jquery：

$("#divContainer").draggable();

如果在

div

区域中单击进行拖动，我可以拖动

div

，但如果我在

textarea

区域中单击，则不能拖动

有办法解决这个问题吗

以下是

您可以使用该选项，将其设置为''，与此类似：

$("#divContainer").draggable({ cancel: '' });

<div id="divContainer">
    <div class="dragger"></div>
    <textarea id="text"></textarea>
</div>

$("#divContainer").draggable({
    handle: '.dragger'
});

---

-使用

取消

选项

---

虽然这对拖动有效，但会导致其他问题

您现在无法点击文本区域本身，因为

draggable

将接管事件。
您现在必须编写一些自定义代码来解决这个问题

使用覆盖也是一个需要实现的问题，因为您现在必须处理何时将其放置在div上，何时不放置

我建议将draggable div中任何元素的默认功能保持原样，而不是对其进行“黑客攻击”

---

可能的替代方案

---

一种更为用户友好的方法可能是在div中添加类似于框架的边框，或者在顶部添加类似于标题的边框，以便用户能够拖动div

使用类似以下内容的HTML：

$("#divContainer").draggable({ cancel: '' });

<div id="divContainer">
    <div class="dragger"></div>
    <textarea id="text"></textarea>
</div>

$("#divContainer").draggable({
    handle: '.dragger'
});

并更新

textarea

css，使其不使用绝对定位，而是使用边距指定左侧和顶部的5px

#text {
    width: 50px;
    height: 50px;
    background-color: green;
    margin-top: 5px;
    margin-left: 5px;
}

然后，您可以实现类似以下内容的选项：

$("#divContainer").draggable({ cancel: '' });

<div id="divContainer">
    <div class="dragger"></div>
    <textarea id="text"></textarea>
</div>

$("#divContainer").draggable({
    handle: '.dragger'
});

---

-使用标题拖动

---

我不确定这是否是您可以使用的解决方案，但这将是一种选择。

希望这对您有所帮助：

JQuery：

$(document).ready(function(){
$('#move').css('top',$("#text").css('top'));

  $('#move').css('left', $("#text").css('left'));
  $("#divContainer").draggable();
  $("#move").draggable({drag:function(event,ui){
  $('#text').css('top',$("#move").css('top')); 
  $('#text').css('left', $("#move").css('left'));
  },grid:[1,1],stop:function(){
  $('#move').css('top',$("#text").css('top'));

  $('#move').css('left', $("#text").css('left'));

  }});

});

---

看看这把小提琴，它非常适合你

代码：

HTML:

<div>
 <textarea name="ta" id="ta" cols="30" rows="10"></textarea>
</div>

JS:

div {
 background-color:#aaa;
 padding: 4px;
 text-align: center;
 position:relative;
}

$('div').draggable({
 cancel: "ta",
 start: function (){
    $('#ta').focus();
 } ,
 stop: function (){
    $('#ta').focus();
 } 
});

---

@Francois Wahl我不想让textarea拖拉。如果我通过点击文本区域中的按钮来拖动DIV，我希望它也被拖动。是的，这正是我所想的。我不知道怎么做。可能您需要附加到文本区域并拖动/鼠标向下/等等。。事件。虽然我认为这相当棘手，但看到文本区域中的

拖动

，则假定您希望突出显示其中的文本。您可以通过透明覆盖来实现这一点，但这样会失去textarea的默认功能。您最好创建一个边框或框架，用户需要使用它来拖动div。单击文本区域时，默认操作是聚焦。正如Francois提到的，您可以使用覆盖。那么，在这种情况下，textarea将如何聚焦？@MIrrorMirror:我添加了一个替代方法，类似于可拖动对话框，使用指定区域进行拖动。虽然我知道您可能会受到限制，无法使用它，但任何其他解决方案都很可能需要一些黑客魔法，并且可能会在解决bug或增强功能时给您带来问题。虽然我不知道，但如果有人已经为此编写了一个插件或类似的插件，我也不会感到惊讶。唯一的问题是，我们如何选择文本区域内的文本？我认为任何解决方案都会牺牲元素的一些默认特性。此外，您还需要有额外的代码，以确保只关注开始拖动的元素，如果拖动是由div本身启动的，则确保停止时不会出现焦点。您可能需要区分输入元素，因为复选框或单选按钮可能不希望在拖动后具有焦点。如果可能的话，在创建具有输入元素的可拖动表单（如容器）时，单独的可拖动元素将更易于实现和维护。虽然这个答案可能适用于这种特定情况，但推理是错误的。

cancel

选项不是这样工作的，

id

属性完全不相关。有关正确用法和原因，请参见Wahl的答案（

取消

选项是一个jQuery选择器，默认为

输入、文本区域、按钮、选择、选项

。将其设置为不包括

文本区域

的任何内容都将允许拖动-此答案中设置的选项只会取消对

元素的拖动-使其工作）