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
Related
For drag and drop functionality I am using jquery-1.12.4.js and jquery-ui.js. When I am using the droppable function of this it is some times working and some times not. This is my javascript code:
$(function() {
$(".connectedSortable").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
$(document).ready(function() {
$(".connectedSortable").droppable({
drop: function(event, ui) {
console.log("event--", event);
}
});
});
Here is my full code: http://jsfiddle.net/vgmz6qnj/1/
The stated problem boils down to the fact that this listener:
$(".connectedSortable").droppable({
drop: function(event, ui) {
console.log("event--", event);
}
});
Does not fire consistently (as shown in the posted by OP video).
My thinking is that this is due to the droppable area fluctuating in size. What I did just to test/demonstrate my theory was to make that area height 100% and with that I was not able to see a miss-fire of the droppable listener.
Here is the jsFiddle
Note the changes:
Added some CSS to make the body/html/table height 100% in order to have unlimited horizontal drop area.
Added a class to the table called tableContainer.
Please correct me if I am wrong on my assumptions.
I have a "draggable only" block where I have some images and another "sortable only" block where I can drop the items from the "draggable only".
What I want to do is when I drag the image into "sortable only" to append the larger version of the dragged image which is hosted on my server.
I think this can be relatively easy to do if there is a way to check when the item is dragged into the sortable list and then append the new image.
This is the actual 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 with what I currently have:
(Hover over the "Headers" and there you should drag an image into "HOVER OVER HEADERS AND DROP IMAGES HERE" block)
I've looked trhrough the plugin API but I can't find a way to track when the item was dragged into the sortable area ?
Any suggesions on how can I do this ?
If I understand what you're shooting for, a receive function on your sortable list should work.
Working Example
$(".sortableList").sortable({
receive: function (event, ui) {
alert('It works');
}
});
The documentation says:
This event is triggered when an item from a connected sortable list
has been dropped into another list. The latter is the event target.
But apparently it will also fire when using a connected draggable.
I was looking the jQuery UI API and found this:
$( "#sortable li" ).droppable({
drop: function( ) {
//do the magic
}
});
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/
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.
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)