web-dev-qa-db-ja.com

jquery uiは、アイテムをドロップしたときにドロップ可能な要素のIDを取得します

アイテムをドロップしたときに、ドロップ可能な要素のIDを取得する方法は？ここでは、jquery uiとasp.net mvcを使用します。

 <table id="droppable">
    <tr>
    <td style="width:300px;height:50px">Backlog</td>
    <td style="width:300px;height:50px">Ready</td>
    <td style="width:300px;height:50px">Working</td>
    <td style="width:300px;height:50px">Complete</td>
    <td style="width:300px;height:50px">Archive</td>
    </tr>
        <tr id="cart">
        <td id="BackLog" class="drag"  style="width:120px;height:50px;">

         <img class="draggable" id="1234" src="../../Content/themes/base/images/ui-icons_222222_256x240.png" />

        </td>
            <td id="Ready"  class="drag"  style="width:140px;height:50px">


            </td>
            <td id="Working" class="drag"  style="width:140px;height:50px">

            </td>
            <td id="Complete" class="drag" style="width:140px;height:50px">


            </td>
            <td id="Archive" class="drag" style="width:140px;height:50px">

            </td>
        </tr>
    }
   </table>

ここで、Ist列の画像を他の列に移動し、その列のIDを取得します。ドラッグアンドドロップにはスクリプトを使用します

<script type="text/javascript">
    $(function () {
        $(".draggable").draggable({ containment: '#imageboundary', axis: "x" });
        $("#droppable").droppable({
            drop: function (event, ui) {                                      
                $.ajax({
                    type: "POST",
                    url: '/Project/AddToPhase/' + $(ui.draggable).attr("id") ,
                    success: function (data) {
                        $('.result').html(data);
                    }
                });
            }
        });
    });
</script>
jquery-uidrag-and-drop
44
user685254

ドラッグ可能な要素とドロップ可能な要素の両方のIDを取得するには、次を使用します。

$('.selector').droppable({ drop: Drop });

function Drop(event, ui) {
  var draggableId = ui.draggable.attr("id");
  var droppableId = $(this).attr("id");
}

申し訳ありませんが少し遅れているかもしれませんが、jqueryの使用を開始したばかりで、正確なものが必要です。

99
Andy

jQuery UIの droppable APIマニュアル_ droped-on-droppable "を取得する方法に言及 greedyオプションのセクションで） ：

_event.target_をチェックして、ドラッグ可能な要素を受け取ったドロップ可能を確認できます

ただし、_event.target_にはDOM要素のみが含まれていることに注意してください...

あなたの質問に答えてください

最初のパラメーターdroppableを使用して、dropのeventコールバックでIDを取得できます。

ピュアJS

プロパティ：_event.target.id_-IDが設定されていない場合：空の文字列 ""
属性：event.target.getAttribute('id')-IDが設定されていない場合：null

jQuery

プロパティ：$(event.target).prop('id')-IDが設定されていない場合：空の文字列 ""
属性：$(event.target).attr('id')-IDが設定されていない場合：未定義

使用法例

_<script>
$(function(){
    $(".droppablesSelector").droppable({
        drop: function (event, ui) {                                      
          //display the ID in the console log:
          console.log( event.target.id );
        }
    });
});
</script>
_

追加情報

Event
jQueryのイベントシステムは W3C標準に従ってイベントオブジェクトを正規化します。
イベントオブジェクトは、イベントハンドラーに渡されることが保証されています（window.eventのチェックは不要です）。 target 、relatedTarget、metaKeyおよびpageX/Yプロパティを正規化し、stopPropagation（）メソッドとpreventDefault（）メソッドの両方を提供します。

8
jave.web

"drop"イベントを実行し、ドロップした要素に問い合わせます。パラメーターである要素"ui"以下の関数内

$( ".selector" ).droppable({
   drop: function(event, ui) { ... }
});

documentation。 をご覧ください

1
The_Butcher