5

要素がドロップされているときに、ドラッグ元の要素から id (または他の属性値) を取得する方法はありますか?

たとえば、左側には、画像をドロップできる div のスタックがあります。右側には、画像を保持する div があります。画像を右から左の div にドラッグすると、ドラッグされた [画像名] と [div id] にドロップされたものに関する情報を取得できます。

左の div から右の div に画像をドラッグしたい場合、右の div に画像をドロップしたときに画像があった div の ID を取得するにはどうすればよいですか。

これが紛らわしい場合は申し訳ありません。

4

1 に答える 1

6

以下は実行可能なソリューションです。

左側にはドラッグ可能な要素 (イメージの場合もあります) を含むコンテナーがあり、右側にはこれらのドラッグ可能な要素をドロップできるコンテナーがあります。要素を左から右にドロップすると、ドロップされる要素の ID と、アイテムがドロップされたコンテナーを示すアラートが表示されます。

アイテムがどの要素からドラッグされたかを知りたい場合は、要素をドラッグするとそのコンテナに対する位置が変わるだけなので、ドロップ時にドラッグされた要素の親にアクセスすることで取得できます。

$(function() {
      $( ".draggable" ).draggable();
 
        $( ".droppable, #droppable-inner" ).droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                alert(ui.draggable.attr('id') + ' was dropped from ' + ui.draggable.parent().attr('id'));
                $( this ).addClass( "ui-state-highlight" );
                
                // Move the dragged element into its new container
                ui.draggable.attr('style','position:relative');
                $(this).append(ui.draggable);
                
                return false;
            }            
        });
  });
.draggable { 
  width: 100px;
  padding: 0.5em;
  margin: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

.droppable {
  width: 230px;
  min-height: 120px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div id="container1" class="droppable">

    <div id="d1" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>

    <div id="d2" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>

    <div id="d3" class="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>
 
</div>

<div id="container2" class="droppable ui-widget-header">
    <p>Drop here!</p>
</div>
 
<div id="container3" class="droppable ui-widget-header">
    <p>Drop here!</p>
</div>

于 2012-10-10T22:41:23.443 に答える