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

Question

У меня есть элемент, который можно перетаскивать и элемент, который является недоступным. После того, как тащили элемент упал на DropZone Я пытаюсь выполнить следующий код JQuery: псевдо

if(draggedelement == value){ 

$(draggedelement).hide(); 

} 
else{ 

$(draggedelement).revert(); 

} 

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

Как это осуществить?

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

Answer 1

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

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

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

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

Ничего не соответствует этому селектору получает сброс, когда вы отпускаете входить, you can see a full demo here. Опция принимает также принимает функцию, если вам нужна фильтрация селектор не может обеспечить, например:

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

Answer 2

Попробуйте добавить этот код в событие «drop». Вот demo.

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

}); 

Как вы можете видеть в сценарии, вы можете либо искать .correct класса или текст внутри (закомментировать строку)

Answer 3

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

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

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

Answer 4

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

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

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

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

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

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

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

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

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

Answer 5

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

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