0

ドロップ可能な資金と組み合わせたセレクターを含む属性の使用に問題があります。文字列「dropAble」を含むIDを持つdiv要素を検索しています

$('div[id*="dragAble"]').draggable();
$('div[id*="dropAble"]').droppable( 
    {
        drop: handleDropEvent
    } 
);

各要素がドロップイベントに反応するようにします。JSFを使用しているため、このようにする必要があります。また、divの初期IDが置き換えられるため、このサブ文字列を検索する必要があります。

ドロップイベントは次のように宣言されます。

function handleDropEvent( event, ui ) {
    var draggable = ui.draggable;
    alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
    alert( this );
}

まず、これらの要素のすべてがドロップイベントに反応するわけではなく、最初の2つだけが反応します。また、「これ」は常に最後の要素であるため、他の定義を上書きしたようです。

dropelementのhtml部分は次のようになります。

<t:dataList value="#{bean.list}" var="elem">
<t:htmlTag value="li" styleClass="folder">
<t:div id="dropAble">
    ...
<:/div>
<t:htmlTag>

ドラッグ要素のhtml部分は次のようになります。

<t:dataTable ...>
<t:column ...>
<h:outputText value="#{dok.text}&nbsp;" escape="false"  />
<t:div forceId="true" id="dragAble">
    Drag
</t:div>
</t:column>
</t:dataTable>

どのドラッグオブジェクトが移動されたか（これは正常に機能します）、ドラッグされたアイテムがどこにドロップされたか（常に最後の要素のようです）を判別できることを期待していました。init関数のdraggable（）呼び出しが機能するため、droppable関数を使用しない理由がわかりません。

これを行う別の方法はありますか？私は何が間違っているのですか？

任意の提案のためのThx！

4

1 に答える 1

0

ここを見てください：http：//jqueryui.com/demos/droppable/そしてここhttp://jqueryui.com/demos/draggable/ あなたはdropハンドラーですべてを正しく行いました。ハンドラーのjQueryUIドキュメントからdrop：

このイベントは、受け入れられたドラッグ可能オブジェクトがこのドロップ可能オブジェクトの「上」に（許容範囲内で）ドロップされたときにトリガーされます。コールバックで$(this) 、ドラッグ可能なドロップ可能なドロップ可能なものを表します。ui.draggable ドラッグ可能を表します。

于 2012-09-13T12:03:11.833 に答える