Title: jQuery sortable stop dropping in original parent
Tags: javascript;jquery;html;jquery-ui
Question: I have a a couple of sortable lists in a backbone view
this.$(".users:not('.client')").sortable({
connectWith: ".users:not('.client')",
helper: 'clone',
revert: true,
start: function(e, ui) {
ui.item.parent().add('droppable-active');
},
over: function(e, ui) {
$('.droppable-active').removeClass('droppable-active');
$(this).addClass('droppable-active');
},
stop: function(e, ui) {
ui.item.parent().removeClass('droppable-active');
},
receive: function(e, ui) {
//do save
}
});
What I wanting to is stop the user being able drop an list item in it's original parent, and trigger a save. Is there away to just do a revert of similar if a list item is added to it's original parent sortable list?
Here is a jsbin example of sortable lists,
jsbin.com/mabarevuhe/4
Comment: http://jsbin.com/mabarevuhe/4/ - currently you re-add any user to there current list, I cannot work out a way to just cancel the drop if they are being dropped into a list they already exist in


Here is another answer: i have edited your code, check it
$(".user__item").draggable({
opacity: 0.7,
helper: "clone",
connectToSortable:".users",
cursor:'move'
$(".users:not(.client)").sortable({
connectWith: ".users:not(.client)",
helper: 'clone',
revert: false,
start: function(e, ui) {
ui.item.parent().add('droppable-active');
over: function(e, ui) {
$('.droppable-active').removeClass('droppable-active');
$(this).addClass('droppable-active');
stop: function(e, ui) {
if ($(ui.item).parent()[0] == this) {
$(this).sortable('cancel');
return;
ui.item.parent().removeClass('droppable-active');
receive: function(e, ui) {
<!DOCTYPE html&gt;
<html&gt;
<head&gt;
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /&gt;
<script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;</script&gt;
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"&gt;</script&gt;
<meta charset="utf-8"&gt;
<title&gt;JS Bin</title&gt;
</head&gt;
<body&gt;
<ul class="users project_manager" data-parent="project_manager"&gt;
<li class="user__item"&gt;Harry Potter</li&gt;
<li class="user__item"&gt;Albus Dumbledore</li&gt;
</ul&gt;
<ul class="users collaborators" data-parent="collaborators"&gt;
<li class="user__item"&gt;Rom Weasley</li&gt;
<li class="user__item"&gt;Fred Weasley</li&gt;
<li class="user__item"&gt;George Weasley</li&gt;
</ul&gt;
<ul class="users clients" data-parent="clients"&gt;
<li class="user__item"&gt;Rita Skeeter</li&gt;
<li class="user__item"&gt;Sirius Black</li&gt;
</ul&gt;
<ul class="users organisations" data-parent="organisations"&gt;
<li class="user__item"&gt;Draco Malfoly</li&gt;
<li class="user__item"&gt;Neville Longbottom</li&gt;
<li class="user__item"&gt;Luna Lovegood</li&gt;
</ul&gt;
</body&gt;
</html&gt;

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:03/02/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><jquery-ui>', 'Title': 'jQuery sortable stop dropping in original parent', 'ViewCount': 205, 'id': 28808862, 'user_AboutMe': '', 'user_AccountId': 23179.0, 'user_DisplayName': 'Udders', 'user_Reputation': 6712.0, 'user_Views': 1115.0, 'user_id': 57872.0}}