web-dev-qa-db-ja.com

条件に基づいてドラッグ可能なjquery UIの位置を元に戻す方法

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

_if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}
_

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

これをどのように達成しますか？

追伸ドラッグ可能な「元に戻す」オプションを知っていますが、これは、ドラッグされたアイテムがドロップゾーンに到達しない場合にのみアクティブになります。

jqueryjquery-ui-draggablejquery-ui-droppable
30
Ash

これにはいくつかの組み込みオプションがあります。 .draggable() で、 revert option を_'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
  }
});​
_
75
Nick Craver

ドラッグ可能物を元に戻す必要があるかどうかを判断するために、ドロップ可能物のドロップメソッドでロジックを実行する必要があるユースケースがありました。これを達成するために次を使用しました。

$('.draggable-elements').draggable({
  revert: function() {
    if ($(this).hasClass('drag-revert')) {
      $(this).removeClass('drag-revert');
      return true;
    }
  }
});

$('.droppable-elements').droppable({
  drop: function(event, ui) {
    if ( % conditional logic check here % ) {
      return $(ui.draggable).addClass('drag-revert');
    }
  }
});

私のユースケースは、各セルが5分間を表すドロップ可能なテーブルです。私のドラッグ可能なものは、1つのセルで始まる予約ですが、予約時間を表すために連続して多くのセルにまたがります。

二重の予約を表しているので、ドラッグ可能なオブジェクトが重複することは望ましくありません。そのため、ドロップした後、移動したばかりのものを除く、行内のすべてのドラッグ可能なものを見つけ、重複がないか確認します。オーバーラップがある場合、私の条件付きロジックはtrueを返し、ドラッグ可能を元に戻します。

次の段階は、データベースを更新するためにajax呼び出しを起動することです。サーバー側のロジックが移動が無効であると言ったら、エラーステータスを返してドラッグ可能に戻すことを望みます。

追伸これが私の最初の答えです。何か間違ったことをしたら申し訳ありません。適切な回答を提供する方法に関するヒントを喜んで受け入れました。

編集：AJAX呼び出しを試みた後、droppable.drop関数がdraggable.revert関数が実行される前にそれを行う機会の窓があることに気付きました。 AJAX呼び出しがfalseを返すまでに、ウィンドウが通過し、draggable.revertが反応するにはクラスの追加が遅すぎました。

そのため、私はもはやdraggable.revert関数に依存せず、代わりにAJAX応答のみに基づいて動作し、falseの場合、次のようにanimate（）を使用してdraggableを元の位置に戻します。

$( '.draggable-elements' ).draggable();

$( '.droppable-elements' ).droppable({
  drop: function( event, ui ) {
    var postData = {
      id: 1,
      ...
    };
    $.post( '/ajax/url', postData, function( response ) {
      var response = $.parseJSON( response );
      if ( response.status != 1 ) {
        return ui.draggable.animate( {left: 0, top: 0}, 500 );
      }
    }
  }
});

Draggable.start/dragにドラッグ可能の元の左と上の値をデータ属性として追加する必要があるかもしれませんが、私にとっては上記でうまくいきました。

8
PaulPrecept

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

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クラスまたは内部のテキスト（コメント化された行）

4
Mottie
$("#droppable").droppable({ 
    accept: function(dropElem) {
        //dropElem was the dropped element, return true or false to accept/refuse it
        if($(this).data('stoneclass') == dropElem.attr("id")){
            return true;
    }
}
});​

これは、ドラッグ可能グループからドラッグ可能を1つだけ受け入れるために使用されました。ドロップ可能グループ内の1つの正しいドロップ可能に。

P.S言語が理解できない場合は申し訳ありません=）

1
Roshan Poudyal

Top：0とleft：0を単純に設定すると、アイテムはドラッグできなくなります。復帰を「強制」するために、私はこれをしなければなりませんでした：

$draggedObj.css({ top: 0, left: 0 })
$draggedObj.draggable( "destroy" )
$draggedObj.draggable({...whatever my draggable options are...});
0
Peter Hollingsworth