Я в настоящее время застреваю, пытаясь понять это.
У меня есть два списка; один - перетаскиваемый список, другой - сортируемый и droppable. Я хотел бы указать успешное падение в моем отсортированном списке, добавив исходный элемент списка с небольшим количеством кода, который показывает, что он был добавлен в другой список. Я могу заставить это работать, вызвав функцию остановки на draggable (она прокомментировала мою скрипку), проблема в том, что она также делает это с элементами с недействительными падениями или промахами.
Кажется, что любая функция (событие, ui) на сортируемом и droppable относится только к элементу, который заканчивает второй список. Мне нужно обновить элемент в исходном списке "перетаскиваемый".
У меня есть:
<div id="tabs2" class="list pre">
<ul>
<li><a href="#otherlist">1</a></li>
<li><a href="#cdaMed">2</a></li>
</ul>
<div id="otherlist" class=".ui-tabs .ui-tabs-panel">
<ul class="list">
<li>Simvastatin 20 mg tablet by mouth once daily</li>
<li>Lorazepam 0.5 mg tablet by mouth three times daily</li>
<li>Insulin Glargine (or Lantus) 10 units once daily</li>
</ul>
</div>
<div id="cdaMed" class=".ui-tabs .ui-tabs-panel">
<ul class="list">
<li>Insulin Glargine (or Lantus) 10 units once daily</li>
<li>Metoprolol Tartrate 50 mg tablet by mouth once daily</li>
<li>Warfarin Sodium 5 mg tablet by mouth once daily Monday, Wednesday, Friday, Sunday</li>
<li>Warfarin Sodium 2.5 mg tablet by mouth once daily Tuesday, Thursday, Saturday</li>
</ul>
</div>
</div>
<div class="scratch">
<ul id="medsScr" class="list">
<li><a class="close"></a>Simvastatin 20 mg tablet by mouth once daily</li>
<li><a class="close"></a>Lorazepam 0.5 mg tablet by mouth three times daily</li>
<li><a class="close"></a>Insulin Glargine (or Lantus) 10 units once daily</li>
</ul>
</div>
Мой jquery:
$('#tabs, #tabs2, #tabs3').tabs({ active: 1 });
$( "#cdaMed .list li" ).draggable({
cursor: "move",
helper: "clone",
opacity: 0.7,
connectToSortable: "#medsScr",
stack: ".list",
revert: "invalid"
/*,
stop: function( event, ui ) {
var $target = $(event.target);
$target.prepend('<span class="drug"></a>');
$target.draggable('disable');
} */
});
$('#medsScr').sortable({
forcePlaceholderSize: true,
cursor: "move",
connectWith: "#cdaMed",
receive: function(e, ui) {
var undo = $(this).siblings('.sc_menu').find('.undo');
var start = $(this).siblings('.sc_menu').find('.so');
var newitem = $(this).children('li.ui-draggable');
//undo.addClass('on');
//start.addClass('on');
newitem.prepend('<a class="close"></a>').removeClass('ui-draggable');
}
});
$('#medsScr.list li').droppable({
accept: ".ui-draggable",
addClass: false,
tolerance: "touch",
drop: function( d, ui ) {
var $drug = $(event.target);
$drug.prepend('<span class="drug"></a>');
}
});
Вот jsfiddle для этого.
Спасибо, любые мысли о том, как исправить это, очень ценятся.
Одним простым решением было бы иметь var $target
во внешнем блоке и делать:
start: function( event, ui ) {
$target = $(event.target);
}
Затем вы можете переместить эти строки для receive()
:
$target.prepend('<span class="drug"></a>');
$target.draggable('disable');
В качестве альтернативы обратите внимание, что если drop успешно, receive()
будет вызван до stop()
. Таким образом, во внешнем блоке можно получить var success
которая получает значение false
в start()
и true
в receive()
; затем проверьте в stop()
если это true
. Если это так, то вы знаете, что было получено перетаскивание.