Question

我发现了许多这方面的例子，但所有这些都太复杂了我的需要。

这是我的代码：

$(function() {
  jQuery(".drag").click(function () { $(this).appendTo(".inner")});
  jQuery(".drag").draggable({ grid: [ 10, 10 ] }, { containment: ".inner" } );
});

我想在将其附加到我希望的容器后才拖动相同的元素。

请注意，拖动元素位于我希望它们拖动的容器之外。这就是我使用appendTo的原因。

HTML：

...
    <div class="inner"></div>
    ...

    <div class="objects">
    <div class="drag"><img src="img1.jpg" title="name1" /></div>
    <div class="drag"><img src="img2.jpg" title="name2" /></div>
    <div class="drag"><img src="img3.jpg" title="name3" /></div>
    </div>
...

Answer 1

不确定您要做什么，但jQuery UI事件start可能对您有所帮助：

$(function() {
  jQuery(".drag").draggable({
      grid: [ 10, 10 ],
      containment: ".inner",
      start: function() { $("#result").html("Drag start!"); }
  } );
});

HTML：

<div class="inner">
    Inner div

<div class="drag">
</div>
</div>
<p id="result"></div>

CSS：

div { border:1px solid black; padding:5px; }
.inner { width: 200px; height:200px; }
.drag { width:50px; height: 50px; background-color:#fca;}

请参阅this jsFiddle。

在appendTo之后拖动jQuery

1 个答案: