1

左側にゾーン 1 ～ 4 という名前のドロップ可能な div があるとします。

<div id="zone1"></div>
<div id="zone2"></div>
<div id="zone3"></div>
<div id="zone4"></div>

右側にドラッグ可能なアイテムがいくつかあります

<div id="drag1">Apple</div>
<div id="drag2">Banana</div>
<div id="drag3">Kiwi</div>
<div id="drag4">Orange</div>

次のように、これらをドラッグおよびドロップ可能に設定できることを知っています。

for (var i=1;i<=4;i++)
{
   var x = "zone" + i;
   $(x).droppable();
}
  for (var i=1;i<=4;i++)
{
   var x = "drag" + i;
   $(x).draggable();
}

フルーツがゾーンにドロップされたときに関数をトリガーして、ドロップされた場所 (ゾーン 1、ゾーン 2 など) とそこにドロップされたフルーツの両方を取得するにはどうすればよいでしょうか。理想的には、果物の名前は必要ありません。おそらく非表示の入力タグなどに隠された果物に関連付けられたIDが必要ですか?

4

4 に答える 4

1

あなたが持っているものの代わりにこれを行うことをお勧めします。

<div id="zone1" class="droppable"></div>
<div id="zone2" class="droppable"></div>
<div id="zone3" class="droppable"></div>
<div id="zone4" class="droppable"></div>

<div id="drag1" class="draggable">Apple</div>
<div id="drag2" class="draggable">Banana</div>
<div id="drag3" class="draggable">Kiwi</div>
<div id="drag4" class="draggable">Orange</div>

次に、スクリプトの場合：

var fruit_id = '';
var dropbox_id = '';
$( '.draggable' ).draggable();
$( '.droppable' ).droppable({
               drop: function( event, ui ) {
            fruit_id = $(ui.draggable).attr('id');
                            dropbox_id = $( this ).attr('id');
                            /* DO SOMETHING HERE */
        }
});
/* Or do something here! */

それが役立つことを願っています!

于 2011-11-30T22:03:04.667 に答える
0

インタラクションdropのイベントを使用できます。droppableこのイベントでは、ハンドラー$(this)はドロップ可能な要素を指しますが、ui.draggableはドラッグ可能な要素を指します。

for (var i=1;i<=4;i++)
{
   var x = "zone" + i;
   $(x).droppable({
      drop: function(){
          //This will alert the id of container in which fruit is dropped
          alert($(this).attr('id'));

          //This will alert the id of fruit container which is dragged
          alert($(ui.draggable).attr('id'));
      }
   });
}
  for (var i=1;i<=4;i++)
{
   var x = "drag" + i;
   $(x).draggable();
}
于 2011-11-30T22:00:20.683 に答える
0

このチュートリアルの例

$(init)

function init() {
  $('#makeMeDraggable').draggable();
  $('#makeMeDroppable').droppable( {
    drop: handleDropEvent
  } );
}

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
}
于 2011-11-30T21:53:48.157 に答える
-1 
<style>
.zones>div{ border:solid 1px gray; background-color:yellow; padding:20px;margin:5px;}
</style>

<div class="zones">
    <div id="zone1"></div>
    <div id="zone2"></div>
    <div id="zone3"></div>
    <div id="zone4"></div>
</div>


<div id="drag1" fruitid="1">Apple</div>
<div id="drag2" fruitid="2">Banana</div>
<div id="drag3" fruitid="3">Kiwi</div>
<div id="drag4" fruitid="4">Orange</div>

<script>

$("div[id*='zone']").droppable({
            accept: "div[id*='drag']",
            drop: function( event, ui ) {
                alert( ui.draggable.text() + " with fruitid = "+ ui.draggable.attr("fruitid")+" added to " + $(this).attr("id"));
                  $( "<div/>" ).text( ui.draggable.text()).appendTo( this );
            }
        })
$('div[id*="drag"]').draggable({helper: "clone"});

</script>
于 2011-11-30T22:46:43.130 に答える