Отключите перетаскиваемый пользовательский интерфейс JQuery после его удаления в разделе Droppable

67
8

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

HTML-код

<div>
<form method="post" action="">
<ol style='list-style:decimal' id="qselected"></ol>
</form>
</div>
<br/>
<div>
<ul id="qlist">
<?php
for($i=1;$i<=5;$i++)
{
?>
<li id='article_<?php echo $i;?>' >
<div class="qitem" style='margin-bottom : 20px;border-bottom:1px solid #e7e7e7;'>
<span data-item="1" class="question">Value : <?php echo $i;?></span>
</div>
</li>
<?php
}
?>
</ul>
</div>

JQUERY CODE

 $(document).ready(function() {

$("#qselected").disableSelection();

$(".qitem").draggable({
containment : "#container",
tolerance:"pointer",
helper : 'clone',
refreshPositions: true ,
revert : 'invalid',
opacity:.4
});

$("#qselected, #qlist").droppable({
revert:true,
hoverClass : 'ui-state-highlight',
greedy: true,
refreshPositions: true,
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
if($(this)[0].id === "qselected")
{
console.log($(this).closest("button").find('.hello'));
$(this).find('.hello').hide();
$(this).find('.btn').show();
return true;
}

},
}).sortable({
revert: true,
refreshPositions: true ,
helper : 'clone',
cursor: "move",
delay: 1,
tolerance: 'pointer',
revert: 50
});
});

спросил(а) 2020-04-04T00:35:51+03:00 3 месяца назад
1
Решение
117

В своей функции drop выполните следующее:

ui.draggable.draggable( 'disable' );

Вот скрипка для вас на основе вашего кода: http://jsfiddle.net/j6dqk54p/1/

ответил(а) 2020-04-04T00:52:19.144993+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема