it-swarm.com.ru

как вернуть положение перетаскиваемого пользовательского интерфейса jquery в зависимости от условия

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

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

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

Как можно это сделать?

Постскриптум Мне известно о перетаскиваемой опции «вернуть», однако она активируется только в том случае, если перетаскиваемый элемент не попадает в зону сброса.

29
Ash

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

$("#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
  }
});​
74
Nick Craver

У меня был случай использования, когда мне нужно было запустить некоторую логику в методе drop-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');
    }
  }
});

Мой пример использования - это таблица, в которой каждая ячейка представляет собой «пятно», представляющее 5-минутный период Мои перетаскиваемые объекты - это бронирования, которые начинаются в одной ячейке, но охватывают несколько ячеек подряд, чтобы обозначить время бронирования. 

Я не хотел, чтобы перетаскиваемые объекты перекрывались, так как это означало бы двойное бронирование. Итак, после удаления я нахожу все перетаскиваемые объекты в строке, исключая только что перемещенный, и проверяю их на совпадения. Если есть совпадение, моя условная логика возвращает true, и я возвращаю перетаскиваемый объект.

Следующим этапом является запуск вызова ajax для обновления базы данных, если логика на стороне сервера говорит, что перемещение недопустимо, я надеюсь вернуть состояние ошибки и вернуть перетаскиваемый объект.

Постскриптум это мой первый ответ, извините, если я сделал что-то не так. Советы о том, как обеспечить хорошие ответы с радостью приняты.

Правка: после попытки моего вызова AJAX я понял, что у функции droppable.drop есть окно, позволяющее сделать свое дело до запуска функции draggable.revert. К тому времени, когда мой вызов AJAX возвратил false, окно прошло, и класс был добавлен слишком поздно, чтобы draggable.revert реагировал.

Таким образом, я больше не полагаюсь на функцию draggable.revert, вместо этого действую исключительно на ответ AJAX и, если false, использую animate (), чтобы вернуть перетаскиваемый объект в исходное положение, как показано ниже:

$( '.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 добавлял исходные левое и верхнее значения перетаскиваемого объекта в качестве атрибутов данных, но для меня вышеописанное работало нормально.

7
PaulPrecept

Попробуйте добавить этот код в событие «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>

Скрипт

$(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
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