Question

当使用draggable时，我怎样才能抓住整个div而不仅仅是div中的单词？

<div id='something'>
   <ul>
      <li class='draggable' id='frank'>Frank</li>
      <li class='draggable' id='Joe'>Joe</li>
  </ul>
</div>

<div id='somethingElse'>
   <div class='dragme' id='yes'>Yes</div>
   <div class='dragme' id='no'>no</div>
</div>

  $(function() {
      $( "li" ).draggable();
      $(".dragme").draggable();
  });

这是我的JSFiddle

Fiddle

Answer 1

将可拖动类添加到要拖动的DIV中，并将其从LI元素中删除：

.draggable

然后在有可拖动类的所有内容上调用$(function() { $( ".draggable").draggable(); });。

<Config>
  <Rule key1="1" key2="Jack" value="Red" />
  <Rule key1="2" key2="John" value="Blue" />
  ...
</Config>

Answer 2

使容器可拖动，而不是列表项：

$("#something, #somethingElse").draggable();

<强> jsFiddle example

Answer 3

只需在您想要可拖动的顶级元素上调用.draggable()即可。我建议使用一个特殊的课程（参见Tony Hinkle的回答），但是如果不改变你的HTML代码，那就是：

$(function() {
  $( "#something, #somethingElse" ).draggable();
});

或者，如果您想根据包含特定类元素的事实选择容器，请使用.has()选择器：

$(function() {
  $( "div:has(.dragme), div:has(.draggable)" ).draggable();
});

jquery可拖动整个div

4 个答案: