Как вернуть позицию jquery UI, перетаскиваемого на основе условия

У меня есть элемент, который перетаскивается, и элемент, который недоступен. Как только перетаскиваемый элемент выпадает на dropzone, я пытаюсь выполнить следующий код jquery psuedo:

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

где функция revert() перемещает перетаскиваемый элемент обратно в исходное положение.

Как это выполнить?

P.S. Я знаю о перетаскиваемой опции "вернуться", однако это активируется только в том случае, если перетаскиваемый элемент не попадает в dropzone.

Ответ 1

Для этого есть некоторые встроенные параметры, на .draggable(), установите revert до 'invalid', и он вернется, если он не был успешно сброшен на droppable, например:

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

Затем в .droppable() установите значение, допустимое для перехода с помощью accept, например:

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

Все, что не соответствует этому селектору, получает reset, когда вы отпускаете, вы можете увидеть полное демо здесь. Опция accept также принимает функцию, если вам нужна фильтрация селектора, которая не может обеспечить, например:

$("#droppable").droppable({ 
  accept: function(dropElem) {
    //dropElem was the dropped element, return true or false to accept/refuse it
  }
});

Ответ 2

Попробуйте добавить этот код в событие "drop". Вот демон .

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>

Script

$(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);
   }
  }
 });

});

Как вы можете видеть в script, вы можете искать класс .correct или текст внутри (прокомментированная строка)

Ответ 3

У меня был прецедент, когда мне пришлось запускать некоторую логику в методе droppable drop, чтобы определить, должен ли перетаскиваемый объект вернуться. Для этого я использовал следующее:

$('.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');
    }
  }
});

Ответ 4

$("#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;
    }
}
});

Это было использовано для принятия только одного перетаскиваемого из группы перетаскиваемых объектов; к одной правильной droppable, в группе droppables.

P.S извините за язык, если он непонятен =)

Ответ 5

Я обнаружил, что если я просто устанавливаю top: 0 и left: 0, элемент больше не перетаскивается. Чтобы "принудительно" вернуть, я должен был сделать это:

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