8

我正在尝试拥有一个可拖动的 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

4

3 回答 3

5

看看这个适合你的小提琴

小提琴

代码：

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();
 } 
});
于 2013-05-30T13:02:49.103 回答
4

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

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

演示- 使用cancel选项

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

您现在无法在draggable接管事件时单击文本区域本身。
您现在必须编写一些自定义代码来解决这个问题。

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

我建议保留可拖动 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;
}

并更新您的textareaCSS 以不使用绝对定位，而是使用边距来指定左侧和顶部的 5px。

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

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

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

DEMO - 使用标题拖动

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

于 2013-05-30T12:20:59.063 回答
-1

希望这有帮助：

演示

查询：

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

  }});

});
于 2013-05-30T12:34:16.490 回答