My Problem:
The sortable event out: fires when I drag something in the list or when I sort the list.
But I only want to start the function when I drag an item out.
My code
$(document).ready(function ust()
{
$('#div1').sortable({
out: function(event, ui) { $('#nfo').append('OUT<br />'); }
});
});
Working example
http://jsfiddle.net/FrbW8/22/
Use beforeStop to intercept the item and remove it:
receive: function(e, ui) { sortableIn = 1; },
over: function(e, ui) { sortableIn = 1; },
out: function(e, ui) { sortableIn = 0; },
beforeStop: function(e, ui) {
if (sortableIn == 0) {
ui.item.remove();
}
}
(I originally found this in the Google, but can no longer find the link. So, I apologize for not referencing the source.)
This is the default behaviour of the out callback. See this jquery ui trac ticket
I really do not agree with the 'logical' behaviour notion.
"However, note that the "out" callback
will still be triggered if you drag
into a list and then release the mouse
(but not if you're not over the list).
This is logical behaviour and happens
for normal sortables as well."
The other solutions doesn't seems to work with connected sortable lists so I'm posting my own solution that works perfectly for my case. This makes use of the "droppable" plugin capturing the "drop" event when the elements are dropped outside of the sortable lists.
$('#div1').sortable({
....
}).droppable({greedy: true})
$('body').droppable({
drop: function ( event, ui ) {
ui.draggable.remove();
}
});
Here is a jsfiddle of this approach in action: http://jsfiddle.net/n3pjL/
I use this.element.find('.ui-sortable-helper').length to make difference between "sort out event" and "drop out event". When you are sorting, sorted item has class ui-sortable-helper. After drop there is no other ui-sortable-class until you start sorting again (at least in my script). Hope to help someone.
Related
My Code:
$("#droppable").droppable({
drop: function (event, ui) {
$(this).addClass("ui-state-highlight").
find("p").
html("Dropped!");
}
});
This was just a dummy to check whether my droppable function is working or not. It is working, but only once. I need it to be recursive so that I can drag and drop elements on it as many times as I want.
It might by happening
just make the indication like this
$(this).addClass("ui-state-highlight").find("p").html("Dropped!")
.delay(1000).html('').removeClass("ui-state-highlight");
I have a problem creating an interaction between 2 listviews.
I followed a solution in this thread:
JQuery UI - Append Draggable to Droppable
which is
$(myDroppable).droppable({
drop:function(event, ui) {
ui.draggable.detach().appendTo($(this));
}
});
However, when dropped, the li item has a weird position and I don't know what causes it.
JSFiddle: http://jsfiddle.net/lightbringer/W3p7d/2/
I created another solution myself:
$("#personlisting_assign").droppable({
accept: "#wrapper_projectpersonlist li",
drop: function(event, ui) {
var el = ui.draggable[0].outerHTML;
ui.draggable.remove();
$("#personlist").append(el);
$("#personlist li").removeAttr("style");
}
});
It works perfectly, but once an element is moved over I cannot move it back to the old list.
The JSFiddle for this one is here: http://jsfiddle.net/lightbringer/W3p7d/
My idea is to be freely move an item between 2 listviews. And yes, I have looked at connectSortTable solution, but I want to drop an item in an area and it will be automatically add to the listview in that area.
Could you please advise me about the two solutions above and how to fix the problems in each one. Thanks in advance
Try
$("#personlisting_assign").droppable({
accept: "#wrapper_projectpersonlist li",
drop: function (event, ui) {
ui.draggable.detach().appendTo('#personlist').removeAttr("style");
}
});
$("#projectperson").droppable({
accept: "#wrapper_personlist li",
drop: function (event, ui) {
ui.draggable.detach().appendTo($("#projectpersonlist")).removeAttr("style");
}
});
Demo: Fiddle
I am using JQuery 1.5.1 and JQuery UI 1.8.11.
I have added sortable for a number of items - the task here is to allow drag to sort, this all works fine.
But I also want to incorporate droppable, so that the item can be dropped onto a "copy me" area - the task there will be to duplicate the item (I will work that bit out later)
Problem is the droppable target is at the bottom of the sortable list (I do not want to move this) and once the drop occurs the sortable item moves to the bottom of the list.
What I want to do is cancel this sort when the drop event fires.
You can see my problem in action here (just drag "Item 1" onto the "Drop to Copy Item" area and you will see the sort does not get cancelled)
As you can see I have tried the following in the droppable "drop" event (suggested from JQuery UI Docs) but it does not seem to work...
$(this).sortable('cancel');
I am also open to any other recommendations on how to achieve this "drop to copy" effect I am looking for.
Thanks
OK, so I have worked out a solution which does the job.
the cancel code does work if you have it in the "stop" event of the sortable function. However, it will only apply once the "revert" has completed. The problem is that I was trying to copy/revert the element from the droppable "drop" event and this was too early.
The solution is to wait for the "stop" event to complete, and to achieve this I had to create a "awaiting copy" flag, to be checked in the "stop" event.
Here is an example
It still doesn't feel right (UX-wise) but it works correct, and you could always set revert to false on the sortable function to get a slightly better feel.
The code from the example is as follows...
var itemCount = 3;
var awaitingCopy = false;
$(init);
function init() {
$("#Items").sortable({
revert: true,
placeholder: "ItemPlaceHolder",
opacity: 0.6,
start: StartDrag,
stop: StopDrag
});
$("#CopyItem").droppable({
hoverClass: "CopyItemActive",
drop: function(event, ui) {
awaitingCopy = true;
}
});
$("#NewItem").click(function(e) {
e.preventDefault();
itemCount++;
var element = $("<div class='Item'>Item " + itemCount + "</div>");
$("#Items").append(element);
element.hide().slideDown(500);
});
}
function CopyItem(element) {
awaitingCopy = false;
var clone = element.clone();
$("#Items").append(clone);
clone.hide().slideDown(500);
}
function StartDrag() {
$("#NewItem").hide();
$("#CopyItem").show();
}
function StopDrag(event, ui) {
if (awaitingCopy) {
$(this).sortable('cancel');
CopyItem($(ui.item));
}
$("#NewItem").show();
$("#CopyItem").hide();
}
Anyway, hopefully this will help others who want the same kind of effect... no stealing my design though ;)
I'm using jQuery UI to perform some drag and drops. I'm trying to find out what droppable a draggable is in.
Can anyone help? Here's my code.
$(".draggable").draggable({
stop: function(event, ui){
console.log(event);
// I need the element which this draggable is correct in.
}
});
I think #Patricia has it slightly the wrong way round. Ive forked their jsfiddle here but the essence is in getting the id of the item dropped into
$('.droppable').droppable({
drop: function( event, ui ) {
alert($(this).attr("id"));
}
});
i think you'll need to catch that in the droppables drop callback.
$('#draggable').draggable();
$('#droppable').droppable({
drop: function( event, ui ) {
alert($(this).attr("id"));
}
});
here's a look at this fiddle to play around with it:
http://jsfiddle.net/2vsC4/
edit: oops, that's the id of the dragged element! you want where it landed! which is easy! I've edited the script here in the answer to show that.
take a look at the draggable and droppable documentation for more info about how they work:
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
Basically I have a draggable list which is connected with a sortable list. Works great except I need some sort of Drop event which I can use to change the list item after its dropped into the sortable list.
This works with .draggable -> .droppable but is there a fix for draggable -> .sortable?
Figured out, turns out there is a receive event which is the same as drop for the droppable.
$('.selector').sortable({
receive: function(event, ui) { ... }
});
Why don't you use 2 sortable lists that are connected ? Then you can use the stop event
You can connect 2 lists by doing:
$("#sortable1, #sortable2").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
And then use the stop event
$( ".selector" ).sortable({
stop: function(event, ui) { ... }
});
You can then change the dropped element by doing ui. (don't know this by heart but with the draggable plugin its ui.draggable)