0

これについて多くの例を見つけましたが、すべてが複雑すぎて必要なものがありませんでした。

これが私のコードです：

$(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>
...
4

1 に答える 1

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;}​

</p>

この jsFiddleを参照してください。

于 2012-03-04T15:04:38.840 に答える