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
}
});
Related
I am trying to setup somme kind of drag and drop wysiwyg editor using JQuery UI.
I have succesfully setup the elements but they have a strange behavior.
It is almost impossible to sort items because of the constant flickering.
i setup my draggables like this:
el.draggable({
containement:'.main-form-container',
revert: "invalid",
connectToSortable: '.sortable'
}).disableSelection();
If i dont set it as draggable the sortable will place the placeholder on itself! why?
Sometimes when an element is dropped into another it becomes ONE draggable element and seem tobe glued together. though that seems fixed with overriding sortable update:
update: function (event, ui) {
$(ui.item).css({
position: 'relative',
top:0,
left:0,
width: 'auto'
});
// init droppable draggable and sortable on this item
setupDandD($(ui.item));
}
and the setupDandD method:
setupDandD($('.form-container'));
function setupDandD(el) {
el.draggable({
containement:'.main-form-container',
revert: "invalid",
connectToSortable: '.sortable'
}).disableSelection();
el.droppable({
accept: '[data-section="toolbox"]',
greedy: true,
hoverClass: 'droppable-hovered',
drop: handleDrop
}).disableSelection();
el.filter('.sortable').sortable({
tolerance:'pointer',
containement:'.main-form-container',
connectWith: ".sortable:not(#" + $(this).id + ")",
revert: 'invalid',
helper: function () {
return $(this);
},
update: function (event, ui) {
console.log('here');
$(ui.item).css({
position: 'relative',
top:0,
left:0,
width: 'auto'
});
setupDandD($(ui.item));
}
}).disableSelection();
};
I guess I need to pickup some event somewhere on the sortable but i am quite lost now...
Well well! I found it!
Actually my biggest mistake was to mix droppable and sortable at the same time. I just had to use sortables and draggables with the connectToSortable option set.
The other weird behavior I had was the sortable trying to insert into itself. This is because sortable "connectWith" was set to a selector that returned self and therefor it instantly placed the placeholder on self when dragged. Quite logical actually!
To overcome this I just surrounded each child sortable with a div. It makes the div a sortable item and prevents triggering the events on self.
One thing to take into consideration when using draggable+sortable is that the sortable will always clone the object as it was when drag started. Meaning that even if you use a custom helper on the draggable, it will still insert the original item. For this I had to replace the item in the "stop" event of the sortable by the one i wanted if it came from my toolbox:
$('.main-form-container').sortable({
placeholder: "sortable-placeholder",
opacity: .35,
connectWith: ".sortable",
stop: function (e, t) {
if (t.item.attr('data-section') == "toolbox") {
$(t.item).replaceWith(createContainer());
}
$(".sortable").sortable({
opacity: .35,
placeholder: "sortable-placeholder",
connectWith: ".sortable"
}).disableSelection();
}
}).disableSelection();
and here is the working fiddle: http://jsfiddle.net/jmorvan/ag659/
I realize there is probably a cleaner way of doing this last fix by overriding some maybe undocumented event in sortable/draggable, but that did the trick for me!
I'm trying to wrap my head around the proper use of jQuery UI's droppable facility. I'm working on a list that, eventually, will function as a queue. It's for a book club where customers can choose which books they want shipped to them, and in what order. It's similar to Netflix's original business model (before streaming) where users could set up a queue of DVDs they wanted interested in.
So, there will be two lists, one representing the user's queue, and the other representing eligible items. They can drag items from the list of eligible items to their queue. In this case, the item stays in the "eligible items" list, and a clone is added to their queue (because they can add multiple of the same item).
The queue should be reorderable via drag and drop, but I haven't gotten that far yet. One step at a time.
While working on the "drag from list of eligible items to queue list" step, I ran into the following issue: new items that were added to the list were not a drop target. Looking at the code, this made sense:
<ul id='list1'>
<li>Some</li>
<li>Thing</li>
</ul>
<ul id='list2'>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Electric Banana</li>
<li>Flamingo Pink</li>
</ul>
jQuery(document).ready(function($) {
$('#list2 li').draggable( {
cursor: 'move',
helper: 'clone',
});
$('#list1 li').droppable({
drop: function(event, ui){
console.log(event);
console.log(ui);
var dropElement = jQuery.clone(ui.draggable[0]);
// Get rid of the inline styles that jQuery has put on the element.
jQuery(event.target).before(dropElement);
}
});
});
You can see that the droppable listener is only for items in #list1 during initialization. So when you drag something there from #list2, it gets added to the list, but there no listener for drop events.
I fixed this by adding a drop listener to every item add to the list (see fiddle):
jQuery(document).ready(function($) {
$('#list2 li').draggable( {
cursor: 'move',
helper: 'clone',
});
$('#list1 li').droppable({ drop: dropHandler });
function dropHandler(event, ui){
console.log(event);
console.log(ui);
var dropElement = $.clone(ui.draggable[0]);
$(dropElement).droppable({ drop: dropHandler });
// Get rid of the inline styles that jQuery has put on the
$(event.target).before(dropElement);
}
});
but I'm not sure if there's a better way. I tried moving the drop listener to list to drop events on the #list1 itself, but I couldn't figure out how to tell which list item an element got dropped on. event.target is the ul element, not the individual li.
Am I going in the right direction with this?
-Josh
I think what you really want is a sortable for the users list and then all the draggable for the "eligible items"
jQuery(function($) {
$('#list2 li').draggable({
cursor: 'move',
helper: 'clone',
connectToSortable: "#list1",
});
$('#list1').sortable({
revert: true,
});
});
http://jsfiddle.net/petersendidit/gKtXa/5/
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'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)