4

画像を特定のdivにドラッグできるドラッグドロップシステムを構築しようとしています。画像はスクローラーにあるので、ドラッグ可能なものにはクローンを使用する必要があります。私が抱えている問題は、画像をdivにドラッグしたときに、「drop」イベントが発生していないように見えることです。オンラインで検索しましたが、機能する解決策が見つかりませんでした。

私は次のものを持っています：

$( "#droppable" ).droppable({
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
    alert('ok');
  }
});

$( ".draggable" ).draggable({ 
  helper: "clone", 
  scroll: false
});

.draggable要素が#droppabledivにドロップされると、アラートが表示されるようにします。ドロップ可能なものはactiveClassを取得するので、そこまで進んでいますが、画像をドロップしても何も起こりません。ただ消えてしまいます。

htmlは次のとおりです。

ドロップ可能の場合（jQuery uiスクロール可能を使用してスクロール可能なdivにあります）：

<div class="scrollable" id="scrollable">
  <div id="scrollable-items" class="items">
    <div id="scrollerDiv_1">
      <div>
        <div id="droppable" class="droppable ui-droppable">
          <div class="ImageArea"></div>
          <div class="CaptionArea">Drag a photo or video into the box above to create a new frame</div>
        </div>
      </div>
    </div>
  </div>
</div>

ドラッグ可能な画像の場合：

<div id="EditMain">
  <div id="libraryMain">
    <div id="my-asset-list" class="assetList">
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
    </div>
  </div>
</div>
4

5 に答える 5

2

動作しました-助けてくれてありがとう。

それが他の人のために働いていることに気づいたら、それは他の何かとの衝突でなければならないと思いました-そして確かに、私が何年も前に入れて忘れていた別の「ドロップ可能な」スクリプトがありました。それを削除すると、すべて正常に動作します。

于 2012-09-13T13:29:09.923 に答える
1

ドロップ機能では、ドロップされたアイテムをコンテナに追加する必要があります。

drop: function(event, ui) {
    $('#mycontainer').append(ui.draggable);
    return true;
}

戻り値は、ドロップが成功したかどうかを示します。

于 2012-09-13T13:10:44.723 に答える
1

私にとっては正しく機能しています..1つのことを実行し、一時的にドロップ可能なdivに背景色を付けます。ドロップ可能として定義した領域にのみ画像をドロップできるため、画像をドロップできる領域を知ることができます。

于 2012-09-13T13:11:26.890 に答える
1

これはあなたのために働くでしょう：

$("#droppable").droppable({
            activeClass: "ui-state-highlight",
            drop: function (event, ui) {
                alert('ok');
                x = $(ui.helper).clone();
                x.appendTo($(this));

            }
        });
于 2012-09-13T13:21:18.690 に答える
0

封じ込めソリューション、または具体的にはドラッグ可能とドロップ可能の関係に関連する同様の問題がありました。もともとこれを試しましたが成功しませんでした。

drag.getSymbolElement().draggable( {
       containment: 'parent',
       ...

包含をhtmlに変更すると、問題が修正されました。

drag.getSymbolElement().draggable( {
       containment: 'html',
       ...

注：それが追加の要因である場合、解決策はAdobeEdge用でした。

于 2014-09-10T16:28:13.963 に答える