We Keep Coding

Can not remove draggable from droppable

I have jQuery's 1.6.4 draggable and droppable based on the answers from Stackoverflow post. Everything seem to work fine but I'm not able to remove the item from the droppable when you drag it out of the droppable area.
Please take a look at the JSfiddle: http://jsfiddle.net/tzp1560b/
Note I'm using ".live('mouseover',function(){" for draggable items as they are loaded via ajax.
HTML:
<div id="drop">
<div class="box">
<ol class="box_drop"><span class="drop-placeholder">Drop Items Here!</span></ol>
</div>
</div>
<div id="search_result">
<ul class="list-entity">
<li id="object-22684">
<div class="clearfix">
<div class="body">
<h4>9032</h4>
<div class="content"></div>
</div>
</div>
</li>
<li id="object-22684" class="ui-draggable">
<div class="clearfix">
<div class="body">
<h4>9033</h4>
<div class="elgg-content"></div>
</div>
</div>
</li>
</ul>
</div>
JQuery:
$(function () {
$('#search_result li').live('mouseover',function(){
$(this).draggable({
cursor: "move",
//revert: "invalid",
opacity: 0.8,
appendTo: "body",
helper: "clone",
start: function(event, ui) {
$(ui.helper).width($(this).width());
}
});
});
$("#drop ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
if (ui.draggable.is('.dropped')) return false;
$(this).find(".drop-placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
appendTo: "body",
helper: "clone"
}).addClass('dropped');
}
}).sortable({
items: "#drop ol",
sort: function () {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
},
out: function () {
ui.item.remove();
$(this).remove();
}
});
});
Can anyone help?
Thank you.

Use
$(ui.draggable).remove(); in the drop event to remove the element
http://jsfiddle.net/tzp1560b/1/

drag, drop and delete elements selectively with jquery ui

Good day all.
I have a simple interface, with 3 "zones". A list of elements that the user has, a place where the user can drag the elements he has and can sort them, and a place where the user can drag any element and if this element is from the second group, the element is deleted.
this is what I've done so far:
<div class="col-md-12">
<h1 id="trash" style="background:#f00;">drop here to delete (trash)</h1>
</div>
<div class="col-md-12">
<h1>take your elements from here (library)</h1>
<div class="group">
<ul class="playlists">
<li class="mymedia" data-id="1453">element 0</li>
<li class="mymedia" data-id="6565">element 1</li>
<li class="mymedia" data-id="1222">element 2</li>
<li class="mymedia" data-id="8888">element 3</li>
</ul>
</div>
</div>
<div class="col-md-12">
<h1>drop here your elements, and sort them (playlist)</h1>
<div class="group">
<ul class="playlists droppable" style="background:#777; min-height:30px;">
</ul>
</div>
</div>
and the javascript:
$('.droppable').sortable();
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
ui.draggable.remove();
}
});
https://jsfiddle.net/peorthyr/dfvxt8g7/
what i'm missing is a little tricky. I want that only the elements dropped into the playlist are deletable (by now, dragging any element into the trash, will delete it), while the elements into the "library" aren't deletable, but only draggable into the playlist. I've tryed this, but with no luck:
$('.droppable').sortable({
drop: function (event, ui) {
ui.draggable.addClass("deletable");
}});
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
ui.draggable.hasClass("deletable").remove();
}
});
what i'm mistaking? may I ask you help on this?

You could handle it adding a class and remove only element getting this class, e.g:
$('.droppable').sortable({
stop: function (event, ui) {
ui.item.addClass('dropped');
}
});
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
if (!ui.draggable.hasClass('dropped')) return false;
ui.draggable.remove();
}
});
-jsFiddle-

jQuery Drag and Drop with sortable UI not working

I'm currently trying to create a drag and drop, with sortable list items... But when I'm moving the draggable item towards the placeholder, it just returns to it's place. Any ideas what I'm doing wrong?
I found this method here, but it doesn't seem to work for me.
Here is my HTML:
<ul id="draggable">
<li class="to-drag" class="items">
<h1>1</h1>
<p>Description 1</p>
</li>
<li class="to-drag" class="items">
<h1>2</h1>
<p>Description 2</p>
</li>
<li class="to-drag" class="items">
<h1>3</h1>
<p>Description 3</p>
</li>
</ul>
<div style="height: 100px; clear: both;"></div>
<ul id="dropzone" class="items">
<li class="placeholder"></li>
</ul>
And this is the jQuery:
$(function() {
$("#draggable li.to-drag").draggable({
connectWith: "#dropzone",
helper: "clone",
revert: "invalid",
droppable: "drop"
});
$("#dropzone").droppable({
drop: function( event, ui) {
$(this).addClass("correct");
}
});
$("ul, li").disableSelection();
});
Thanks for the help! :)
EDIT
This is the working jQuery:
$(function() {
$("#dropzone").sortable({
revert: true,
opacity: 0.5
});
$("#draggable li").draggable({
connectToSortable: ".items",
helper: "clone",
revert: true,
opacity: 0.5
});
$("li.placeholder").droppable({
revert: false,
drop: function (event, ui) {
var dragging = ui.draggable.clone();
$(this).append(dragging);
}
});
$("ul, li").disableSelection();
});

You've got at least three major problems:
Draggable doesn't have connectWith, it has connectToSortable.
So you should change this. See doc:
http://api.jqueryui.com/draggable/
To use connectToSortable, you need a sortable, not at
droppable.
You'll need to change drop event for a sortable event, receive
maybe or update, depending on what you need.
http://api.jqueryui.com/sortable/
It could look like this:
$(function() {
$("#draggable li.to-drag").draggable({
connectToSortable: "#dropzone",
helper: "clone",
revert: "invalid",
droppable: "drop"
});
$("#dropzone").sortable({
receive: function( event, ui) {
$(this).addClass("correct");
}
});
$("ul, li").disableSelection();
});

Please see the changes I have made
$(function() {
$("#draggable li.to-drag").draggable({
appendTo: "body",
helper: "clone",
revert:"invalid"
});
$("#dropzone1").droppable({
drop:function( event, ui) {
alert(ui.draggable.text())
$("#dropzone").text( ui.draggable.text() ).appendTo( this );
}
});
$("ul, li").disableSelection();
});
The additional div ensures you are dragging on to the right panel
<ul id="draggable">
<li class="to-drag" class="items">
<h1>1</h1>
<p>Description 1</p>
</li>
<li class="to-drag" class="items">
<h1>2</h1>
<p>Description 2</p>
</li>
<li class="to-drag" class="items">
<h1>3</h1>
<p>Description 3</p>
</li>
</ul>
<div style="height: 100px; clear: both;"></div>
<div id="dropzone1" style="border:solid 1px">
<ul id="dropzone" class="items" >
<li class="placeholder"></li>
</ul>
</div>
Requires some tweaking to get some additional functionality but you should be able to do this
you will need additional code to do the sorting
Check out this link here
Cheers
Truez

jquery sortable ui remove item when is dragged to a specific div

I'm using jQuery sortable plugin
I have two blocks connected one is draggable and the other is only sortable.
What I want to do is when I'm dragging an item from the sortable in to a specific div to remove it.
Here's the markup:
<div>Draggable source items
<ul>
<li class="draggable" class="ui-state-highlight">Drag me down</li>
<li class="draggable" class="ui-state-highlight">Drag me down 2</li>
<li class="draggable" class="ui-state-highlight">Drag me down 2</li>
</ul>
</div>
<div>Sortable List 1
<ul class="sortableList">
</ul>
</div>
<div class="test">
<!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT -->
</div>
JS:
(document).ready(function () {
$(".sortableList").sortable({
revert: true,
/*update: function (event, ui) {
// Some code to prevent duplicates
}*/
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid'
});
});
Here is a jsfiddle

how about this?
$('.droppableArea').droppable({
accept: 'li',
drop: function(event, ui) {
ui.helper.remove();
}
});
I marked your droppable DIV with 'droppableArea' class. See fiddle for details.

how to stop sortable event with cancel

I have a draggable list, and a sortable list. The draggable list will have ALL possible items. The sortable list is the user's selections.
I want the sortable to do a check on receive to see if the item already exists, and if so, stop the sort and revert the item back to the draggable list. However, even when the cancel event fires, the update event continues and the revert never happens.
What am I missing?
Here's the fiddle: http://jsfiddle.net/XW48M/1/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<ul id="teams" class="list-group">
<li class="list-group-item poll-assets" data-id="1" data-name="Team 1">Team 1</li>
<li class="list-group-item poll-assets" data-id="2" data-name="Team 2">Team 2</li>
<li class="list-group-item poll-assets" data-id="3" data-name="Team 3">Team 3</li>
</ul>
</div>
<div class="col-md-5">
<ul id="poll" class="list-group">
<li id="1" class="list-group-item poll-item" data-id="1" data-name="Team 1">Team 1</li>
<li id="4" class="list-group-item poll-item" data-id="4" data-name="Team 4">Team 4</li>
<li id="5" class="list-group-item poll-item" data-id="5" data-name="Team 5">Team 5</li>
</ul>
</div>
</div>
</div>
Javascript:
$(document).ready(function () {
$("#poll").sortable({
revert: true,
update: function (event, ui) {
console.log('update');
var order = $("#poll").sortable("toArray");
if ($(ui.item).hasClass('ui-draggable')) {
$(ui.item).addClass('poll-item').removeClass('ui-draggable draggable').attr('id', $(ui.item).data('id'));
}
},
receive: function (event, ui) {
console.log('receive');
var order = $( "#poll" ).sortable( "toArray" );
var id = $(ui.item.data('id'));
if ($.inArray(id, order)) {
$("#poll").sortable('cancel');
console.log('CANCELLED');
return;
} else {
$(ui.item).remove();
}
}
}).disableSelection();
$('#teams')
.find('.poll-assets').draggable({
opacity: 0.75,
appendTo: document.body,
helper: 'clone',
connectToSortable: '#poll',
}).disableSelection();
});

I don't quite understand why you went with draggable + sortable instead of 2 connected sortables.
So i gave it a try using this method and i came with something like that :
$("#teams").sortable({
revert: true,
connectWith: "#poll",
start: function () {
console.log('start');
var order = $('#poll').sortable("toArray", {
attribute: "data-id"
});
$('#poll').data('order', order);
}
}).disableSelection();
$("#poll").sortable({
revert: true,
receive: function (event, ui) {
console.log('receive');
var order = $('#poll').data('order');
var id = $(ui.item).data('id').toString();
if ($.inArray(id, order) != -1) {
console.log('CANCELLED');
$(ui.sender).sortable("cancel");
} else {
console.log('NOT CANCELLED');
}
}
}).disableSelection();
Main issue was to get the correct item array, because on receive event, the array is already updated with the "newly" added item. I had to put it inside data on the start event of the other sortable and to get it back on receive event.
I still find a few things not very satisfying:
Using id selectors inside start and receive callbacks; but event arguments didn't contain the elements i needed
The revert effect is quite ... weird
Anyhow, it is the closest i could get to what you expected; i also made a jsfiddle for you to check.
Let me know if it helps / post your code if you can get anything better.

HTML:
<div class="leftDiv">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
<div class="rightDiv">
</div>
JS:
$(document).ready(function(){
$(".leftDiv .item").draggable({
helper: function(ev, ui) {
return "<span class='helperPick'>"+$(this).html()+"</span>";
},
connectToSortable: ".rightDiv"
});
$(".rightDiv").sortable({
'items': ".item",
'receive': function(event, ui){
// find the class of the dropped ui, look for the one with the integer suffix.
var clazz = getClassNameWithNumberSuffix(ui.item);
$('.leftDiv .' + clazz).draggable( "option", "revert", true )
if($('.rightDiv .' + clazz).length > 1){
$('.rightDiv .' + clazz + ':not(:first)').remove();
}
}
});
});
function getClassNameWithNumberSuffix(el) {
var className = null;
var regexp = /\w+\d+/;
$($(el).attr('class').split(' ')).each(function() {
if (regexp.test(this)) {
className = this;
return false;
}
});
return className;
}
CSS:
.leftDiv, .rightDiv {width:120px; float:left; border:1px solid #000; padding:5px; margin:10px; min-height:130px}
.rightDiv {margin-left:40px}
.item {height:20px; line-height:20px; text-align:center; border:1px solid #EEE; background-color:#FFF}
.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px}
Source: http://jsfiddle.net/perrytew/RxKkA/3/