I'm working on a project where I'm dragging elements from a 3rd party jQuery control to a jQuery sortable, using a combination of droppable and sortable.
This works perfectly fine, except the item being added is always added to the bottom of the sortable list, and you must then move it to the correct location as a separate step.
Is it possible to have the item added to the location where you dropped it in the list?
You can see this behavior in the jQuery shopping card droppable demo from here. Here is a jsfiddle of the same code. As you add items from the products to your cart at the bottom, it always adds at the bottom, even if you drop it near the top.
Here's the jQuery code:
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)",
sort: function () {
$(this).removeClass("ui-state-default");
}
});
});
use droppable's drop event's callback to compare the current top offset position of the draggable helper with the top offset of every element already present or previously added in the droppable
drop: function (event, ui) {
if($(this).find(".placeholder").length>0) //add first element when cart is empty
{
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
else
{
var i=0; //used as flag to find out if element added or not
$(this).children('li').each(function()
{
if($(this).offset().top>=ui.offset.top) //compare
{
$("<li></li>").text(ui.draggable.text()).insertBefore($(this));
i=1;
return false; //break loop
}
})
if(i!=1) //if element dropped at the end of cart
{
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
}
}
DEMO WITH CODE
FULL SCREEN DEMO
What about doing this? Using both the connectToSortable AND connectWith options works, I think. There might be a more clever way to hide/show the placeholder, but this definitely works.
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone",
connectToSortable: "#cart ol"
});
$("#cart ol").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
sort: function () {
$(this).removeClass("ui-state-default");
},
over: function () {
//hides the placeholder when the item is over the sortable
$(".placeholder").hide();
},
out: function () {
if ($(this).children(":not(.placeholder)").length == 0) {
//shows the placeholder again if there are no items in the list
$(".placeholder").show();
}
}
});
});
Work Demo in Fiddle
Related
I have 2 divs: leftDiv and mainDiv. leftDiv contains some list elements which are draggable and droppable into mainDiv. I want to make these dropped items draggable inside the mainDiv as well, but after the first drag inside this div, items become non draggable. How can I fix this? Here is my jQuery code:
$('#output li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
$(ui.helper).remove();
$(this).append(ui.draggable.draggable());
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
You can fix it like this:
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
//$(ui.helper).remove();
var draggedItem = ui.draggable.draggable();
$(this).append(draggedItem);
draggedItem.draggable();
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
Online Demo (fiddle)
I have Droppable div with nested Sortable and Draggable which is connected to the Sortable and is accepted by the Droppable.
<div id="droppable">
<div id="nested-sortable"></div>
</div>
<div class="draggable">
test
</div>
jQuery (2.0.2)
$("#droppable").droppable({
accept: ".draggable",
drop: function() {
console.log('Dropped'); //This should be called on drop!!
}
});
$("#nested-sortable").sortable({
placeholder: 'item',
});
$(".draggable").draggable({
connectToSortable: "#nested-sortable",
helper: "clone"
});
My problem is that when I drag the Draggable over the Sortable, drop event is triggered. I don't understand why - I haven't dropped it.
I reproduced it in this fiddle: http://jsfiddle.net/9ydp3L7q/3/
Thanks
I found a dirty workaround. I really don't like it but it seems to work alright.
I ignore drop if the helper has ui-sortable-helper (which it gets when it's over the sortable).
$("#droppable").droppable({
accept: ".draggable",
drop: function(event, ui) {
if (ui.helper.hasClass("ui-sortable-helper")) {
return;
}
console.log('Dropped');
}
});
But I have to remove the class manually on out of the sortable. If I try to just remove the class I get into and infinate loop (and javascript on the page crashes) - so I had to do it in timeout.
$("#nested-sortable").sortable({
placeholder: 'item',
out: function(event, ui) {
// this looks kind of dirty to me
setTimeout(function () {
$(ui.helper).removeClass("ui-sortable-helper")
}, 1);
}
});
Fixed fiddle: http://jsfiddle.net/9ydp3L7q/6/
Use disable for sortable while using draggable. and Use disable for draggable while using sortable.
$( ".selector" ).sortable( "disable" );
$( ".selector" ).draggable( "disable" );
or
$('.selector').draggable({
disabled: false
});
$(".selector").sortable({
disabled: false
});
I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown here, however I am dynamically injecting my portlets, no big problem there.
<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>
Here is the JavaScript
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
beforeStop: function( event, ui ) {}
});
I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
start: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.sender.draggable("cancel");
}
},
stop: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.item.remove();
// Show an error...
}
}
});
You can use start to get the current count of portlet elements, then use stop to do the checking
Also notice I added class names to each div to allow only one div to have a maximum of 1 portlet
$(document).ready(function () {
$.count = 0;
$(".myrow").sortable({
connectWith: ".myrow",
revert: true,
start: function () {
$.count = $(".myrow").has(".portlet").length;
console.log("Start " + $.count);
},
stop: function (event, ui) {
if ($(ui.item).parent(".myrow").hasClass("left")) {
if ($.count == 2) {
$(".myrow").sortable("cancel");
}
}
}
});
});
DEMO: http://jsfiddle.net/Ue4dq/
I have a cloned element which I am able to drag however I wish to drop it in a specific div element and if valid not revert back to its original position, however it is always reverting back to its original position whether it is valid or not.
I am currently using the code below:
$("ul#objectsList li").draggable({
revert: 'invalid',
snap: "#objectsDropBox",
snapMode: "inner",
helper: function() { return $(this).clone().appendTo('body').show(); },
start: function(e, ui) { $(ui.helper).addClass("ui-draggable-helper");}
});
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function( event, ui ) {
alert('hi');
}
});
Why is it not staying in the div when a valid draggable is dropped?
Try this
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function (event, ui) {
$(this).append(ui.draggable);
//if you want to retain the element use ui.draggable.html() or clone it.
}
});
Fiddle - http://jsfiddle.net/dmNhZ/
I have jquery drag and drop working so I can move one row in a table to another.
the demo is here:
http://www.aussiehaulage.com.au/Default.aspx
I use jquery-ui-1.8.22 to make my table draggable/droppable.
My javascript is :
$(document).ready(function () {
$(".draggable").draggable({
helper: function () { return "<div class='ghost'></div>"; },
start: resizeGhost,
revert: 'invalid'
});
$(".droppable").droppable({
hoverClass: 'active',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
});
However when i move the row, if the mouse cursor is in between 2 rows on the droppable table both droppable rows are highlighted.. I need to make it so it will only highlight 1 droppable row at a time..
is this possible?
Add a new option in your droppable element, using either tolerance fit or intersect
$(".droppable").droppable({
hoverClass: 'active',
tolerence: 'intersect',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
And for your reference: jquery-ui