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/

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/

How to drag element in specific location using jquery?

jquery code
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$(".shoppingCart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
and this is html code
<div id="products">
<h1 class="ui-widget-header">Blocks</h1>
<div class="ui-widget-content">
<ul>
<li data-id="1"> 10000$ </li>
<li data-id="2"> -10000$ </li>
<li data-id="3"> 10000$ </li>
<li data-id="4"> -10000$ </li>
<li data-id="5"> Bank </li>
<li data-id="6"> Loan </li>
</ul>
</div>
</div>
<div id="shoppingCart1" class="shoppingCart">
<h1 class="ui-widget-header">Cresit Side</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<div id="shoppingCart2" class="shoppingCart">
<h1 class="ui-widget-header">Debit side</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
Now i want to know how can i drop any element in specific container like in credit side and debit side.
my demo is here http://jsfiddle.net/Sanjayrathod/S4QgX/541/
now i want to drag and drop first three element is in credit side only and remaining elements in debit side.
So how can i do this.
Please help.

Add specific class name in accept parameter of dropable area.
Add the class credit or debit in the dragable element.
$("#shoppingCart1 ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept:".credit", //for credit
drop: function(event, ui) {
$("#shoppingCart2 ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept:".debit", //for credit
drop: function(event, ui) {
DEMO Here.

If you want to restrict dropping elements to specific containers use 'accept' option of target droppable: http://jqueryui.com/droppable/#accepted-elements.
It determines elements that can be dropped via selector e.g.
$( "#droppable" ).droppable({
accept: "#canBeDroppedId",
...
});