31

ドラッグ可能な要素とドロップ可能な要素があります。ドラッグされたアイテムがドロップゾーンにドロップされたら、次のjquery疑似コードを実行しようとしています:

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

関数はrevert()ドラッグされたアイテムを元の位置に戻します。

どうすればこれを達成できますか？

PS ドラッグ可能な「元に戻す」オプションを認識していますが、これは、ドラッグされたアイテムがドロップゾーンに到達しない場合にのみ有効になります。

4

5 に答える 5

77

これにはいくつかの組み込みオプションがあり、 でオプションを.draggable()に設定すると、次のようにドロップ可能にドロップされなかった場合は元に戻ります。revert'invalid'

$("#draggable").draggable({ revert: 'invalid' });

次に、オプション.droppable()を使用してドロップに有効なものを設定します。次に例を示します。accept

$("#droppable").droppable({ accept: '#draggable' });​

このセレクターに一致しないものは、離すとリセットされます。ここで完全なデモを見ることができます。次のように、セレクターが提供できないフィルタリングが必要な場合、accept オプションは関数も受け取ります。

$("#droppable").droppable({ 
  accept: function(dropElem) {
    //dropElem was the dropped element, return true or false to accept/refuse it
  }
});​
于 2010-06-22T00:37:41.783 に答える
4

そのコードを「ドロップ」イベントに追加してみてください。ここにデモがあります。

HTML

<div class="draggable ui-widget-content correct"><p>1</p></div>
<div class="draggable ui-widget-content"><p>2</p></div>
<div class="draggable ui-widget-content"><p>3</p></div>
<div class="draggable ui-widget-content"><p>4</p></div>
<br style="clear: both">
<div id="droppable" class="ui-widget-header">
  <p>Drop me here</p>
</div>

脚本

$(function() {

 $(".draggable").draggable({ revert: true });

 $("#droppable").droppable({
  activeClass: 'ui-state-hover',
  hoverClass: 'ui-state-active',
  // uncomment the line below to only accept the .correct class..
  // Note: the "drop" function will not be called if not ".correct"
  //  accept : '.correct',
  drop: function(event, ui) {
   // alternative method:
   // if (ui.draggable.find('p').text() == "1") {
   if (ui.draggable.is('.correct')) {
    $(this).addClass('ui-state-highlight').find('p').html('You got it!');
    // cloning and appending prevents the revert animation from still occurring
    ui.draggable.clone(true).css('position', 'inherit').appendTo($(this));
    ui.draggable.remove();
   } else {
    $('#droppable > p').html('Not that one!')
    setTimeout(function(){ $('#droppable > p').html('Drop here'); }, 1000);
   }
  }
 });

});

スクリプトでわかるように、.correctクラスまたは内部のテキスト (コメントアウトされた行)を探すことができます。

于 2010-06-21T22:30:09.330 に答える
0

単純に top:0 と left:0 を設定すると、アイテムをドラッグできなくなることがわかりました。元に戻すを「強制」するには、次のようにする必要がありました。

$draggedObj.css({ top: 0, left: 0 })
$draggedObj.draggable( "destroy" )
$draggedObj.draggable({...whatever my draggable options are...});
于 2016-01-08T01:46:25.180 に答える