0

私はコンテナにいくつかの画像を持っています。それらはすべてドラッグ可能で、クラス「コンテナ」を持ついくつかのドロップ可能なコンテナがあります。

ドラッガブルは「スナップ」を「.container」に定義しています。

問題は、コンテナに「スナップ」されている場合、ドラッグ可能オブジェクトがドロップされないことです。「スナップ」プロパティを削除すると問題は解決しますが、ドロップする前にドラッグ可能オブジェクトをスナップしたいと思います

左の画像はドロップしない（スナップされる）、右の画像は問題なくドロップする

左側の画像はドロップしません (スナップされます)、右側の画像は問題なくドロップします。

どんなアイデアでもいただければ幸いです

コード：

--draggable
$('#' + this.Id + ' .imageList li img').draggable({ scroll: true, helper: 'clone', revert: 'invalid', snap: '.dropHere, .dropHereReassign', appendTo: 'body', revertDuration: 200, snapMode: 'inner');

--droppable
var that = this;
$('#' + this.Id + ' .imageList img.dropHere').droppable({ drop: function (event, ui) {
$(that).attr('src', ui.draggable.attr('src'));
$(that).removeClass('dropHereReassign');
$(that).droppable({ disabled: true }); } });

HTML:

<div id="imagesContainer">
 <ul class="imageList">
  <li><img id="photo-1" src="/someImage.jpg" /></li>
 </ul>
</div>
<div id="dropImagesContainer" class="photoSection">
 <ul class="imageList">
  <li><img src="/00/06/12/00061275_in.png"><span class="description"></span></li>
  <li><img src="/dropHere.jpg"><span class="description"></span></li>
 </ul>
</div>
4

1 に答える 1

0

プロパティを追加しようとしましたか？

            connectToSortable: ".imageList",

ここにいくつかの良い例があります: http://jqueryui.com/demos/draggable/#sortable

于 2011-08-01T20:26:21.810 に答える