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/
Related
Let me give an example: I want to create colored div's by dragging them from the left list .draggable-colors to the right div #sortable.
HTML:
<div>
<ul class="draggable-colors" style="float:left;">
<li id="draggable-red">Red</li>
<li id="draggable-green">Green</li>
<li id="draggable-blue">Blue</li>
</ul>
<div id="sortable" style="float:right;">
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
</div>
JS:
$("#sortable").sortable();
$("#draggable-red").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("#draggable-green").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("#draggable-blue").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
So when I start dragging an item from the left list I want a colored div being dragged <div class="red"></div> and not an <li id="draggable-red">Red</li> so I can create colored div's.
How can I accomplish this using droppable and draggable?
EDIT 1:
What I need is something like this (whatToBeDragged):
$("#draggable-red").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
whatToBeDragged: "<li id='draggable-red'>Red</li>"
});
EDIT 2:
Added a helper function to the draggable handler, it fixed the dragging issue but somehow it keeps creating list items and not colored divs. Anyone?
$("#draggable-red").draggable({
connectToSortable: "#sortable",
helper: "<li id='draggable-red'>Red</li>",
revert: "invalid"
});
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-
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
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.
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",
...
});