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/
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 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
Basically, I have .dragme (object being dragged), .dropzone1 (place to be dropped at) and an image I want .dragme to become once it has been dropped.
So far I have this
$(".dropzone1").droppable({
accept:".dragme",
drop: function() {
alert("DROPPED");
}
});
So, that code works, once .dragme has been dropped in place I get the alert. But I've tried using .attr to change the image source of .dragme in place of where the alert is currently (the alert also works if I put it into the below code, but the image still doesn't change):
$(".dropzone1").droppable({
accept:".dragme",
drop: function() {
$(".dragme").attr("src", "../imgs/newimage.png");
}
});
I've looked through other answers to similar questions, but none of the solutions worked, any help is greatly appreciated.
This is a little jsfiddle but i can't get my images onto it, they're only 30x30 png's anyway. I made it so that the alert is working so if anyone can have a play and get it so that the red block changes colour or into an image when it lands on the blue, that'd be great!
Try this:
demo
$(".dragme").draggable();
$(".dropzone1").droppable({
accept:".dragme",
drop: function( event, ui ) {
$(".dragme").attr("src", "../imgs/newimage.png");
alert($(".dragme").attr('src'));
}
});
2nd Solution
DEMO
$(".dragme").draggable();
$(".dropzone1").droppable({
accept:".dragme",
drop: function( event, ui ) {
$(ui.draggable).attr("src", "../imgs/newimage.png");
}
});
From the drop event documentation:
This event is triggered when an accepted draggable is dropped 'over' (within the
tolerance of) this droppable. In the callback, $(this) represents the droppable
the draggable is dropped on. ui.draggable represents the draggable.
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)