Question

我正在尝试使用一个可拖动的div，它也可以从其中的textarea中拖出。

HTML：

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

的CSS：

#divContainer {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

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

jquery的：

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

如果我通过点击div区域进行拖动，我可以拖动div，但如果我点击textarea区域则不能拖动。

有没有办法解决这个问题？

以下是jsFiddle

Answer 1

查看这个适合你的小提琴

FIDDLE

代码：

HTML：

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

<强> CSS：

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

<强> JS：

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

Answer 2

您可以使用cancel选项，将其设置为''，类似于：

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

DEMO - 使用cancel选项

虽然这适用于拖动，但它会导致其他问题。

您现在无法点击textarea本身，因为draggable接管了该事件你现在必须编写一些自定义代码来解决这个问题。

使用叠加层也是一个需要实现的问题，因为你现在必须处理何时将它放在div上而不是什么时候。

我建议保留draggable div中任何元素的默认功能，而不是“黑客”它们。

可能的替代方案

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

使用类似于此的HTML：

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

给dragger以下css：

.dragger {
    border: none;
    background-color: gray;
    height: 15px;
    width: 100%;
    display: block;
}

并将textarea css更新为不使用绝对定位，而是使用边距指定左侧和顶部的5px。

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

然后，您可以实现与此类似的handle选项：

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

DEMO - 使用标题拖动

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

Answer 3

希望这有帮助：

Demo

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'));

  }});

});

如何在一个文本区内制作div可拖动？

3 个答案:

可能的替代方案