How to get the exact dropped elelement with jquery ui droppable
I have 2 or more elements overlay.
And when I drop an element jquery ui run the "drop" event for each element no juste the element I've drop.
Ok I found this solution
I add the hovered class and when is dropped I check if my element has this class
$(".droppable").hover(
function () {
$(this).addClass('hovered')
}, function () {
$(this).removeClass('hovered')
},
);
$('.droppable').droppable({
refreshPositions: true,
greedy: true,
tolerance: "touch",
drop: function (event, ui) {
var draggedElement = ui.draggable;
var droppedElement = $(this);
if(droppedElement.hasClass('hovered')) {
console.log('droppable')
// drop my element
}
},
});
Related
I need to drag one element and while dropping it should append a new html div container and appended html div container should be droppable (nested). I have attached fiddle file here. Can any one help on this?
$('.dragItem').draggable({
helper: 'clone',
connectToSortable: "#column2,#column2 div"
});
$('.dragItem').sortable({
containment: "parent"
});
$('#column2').sortable({
placeholder: "highlight"
});
$('#column2').droppable({
accept: '.dragItem',
drop: function(event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
drag.appendTo(column2);
drag.sortable({
placeholder: "highlight"
});
drag.droppable({
accept: ".dragItem",
drop: function (event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
}
})
drag.css({width:'', height: ''})
}
});`
Js Fiddle
I am trying to do something similar to this example I found here: http://jsfiddle.net/mekwall/sY7Vr/2/
$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
$(ui.item).text("Drop me!");
},
stop: function(event, ui) {
$(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
$(ui.item)
.addClass("ui-state-highlight")
.after(
$("<div>")
.addClass("drag")
.html("New item!")
);
}
});
In my case, I have an action bar that contains 'buttons' and a page. When I drag an action 'button' from the action bar (ie "Add text box") and do the drop, I want to insert a input rather than the button itself.
Is there a good way to do this?
Thanks for your time.
All you need to do is replace the content in the html method. The code below is inserting the html for an input of type text and is then removing the dragged item.
Updated Fiddle
$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
$(ui.item).text("Drop me!");
},
stop: function(event, ui) {
$(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
$(ui.item)
.addClass("ui-state-highlight")
.after(
$("<div>")
.html("<input type='text' class='new-input'/>") //Add an input
);
//Remove the dragged item. You can use "hide" here as well
$(ui.item).remove();
}
});
I have an image that I drag from one part of the page and drop into a DIV. No problem. But when I just drag the image around inside its new DIV home, I still trigger the DIV's drop handler. Is there an easy way to disable the drop handler for elements that are already in the droppable?
Thanks
You can add a class to the dropped element, then in the drop function check if the element have that and if so exit the drop function.
In my example I clone the element in a new one on drop, if you use the dragged you must change the selected element.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
alert('dropped');
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/hLxAd/
I've positioned 2 containers such a way that container one overlays on another. But when I drop an item onto the container one, the dropped item goes into both containers. How do I restrict that?
//JS Code:
$("div.draggable").draggable({
helper: "clone",
cursor: "move",
containment: 'body'
});
$("div.droppable").droppable({
addClasses: false,
drop: function (event, ui) {
var $draggable = $(ui.draggable),
$droppable = $(this);
$droppable.html($draggable.clone());
}
});
Demo: http://jsfiddle.net/HL8VR/
Thanks #Nal but nothing works for me, So I Created this hack.
I store some data with an element once an item is dropped onto it. Unfortunately the data is stored with both Droppables which I could not isolate.
$("div.droppable").droppable({
addClasses: false,
drop: function (event, ui) {
var $draggable = $(ui.draggable),
$droppable = $(this);
$droppable.data({'drop': true, 'draggable': $draggable});
}
});
But once the item is dropped, I could figure out which droppable I'm hovering on.
$('div.droppable').hover(function() {
if ($(this).data('drop') === true) {
$(this).html($($(this).data('draggable')).clone());
// Clears the data from both droppables to avoid duplicating the item in them
$('div.droppable').data({'drop': false, 'draggable': false});
}
});
Demo: http://jsfiddle.net/codef0rmer/AVQVs/
This function takes an li element and adds it to another ul element. After this code is fired the jquery events attached to the children spans of the li element do not fire the first time they are clicked.
function AddToDropBox(obj) {
$(obj).children(".handle").animate({ width: "20px" }).children("strong").fadeOut();
$(obj).children("span:not(.track,.play,.handle,:has(.btn-edit))").fadeOut('fast');
$(obj).children(".play").css("margin-right", "8px");
$(obj).css({ "opacity": "0.0", "width": "284px" }).animate({ opacity: "1.0" });
if ($(".sidebar-drop-box ul").children(".admin-song").length > 0) {
$(".dropTitle").fadeOut("fast");
$(".sidebar-drop-box ul.admin-song-list").css("min-height", "0");
}
if (typeof SetLinks == 'function') {
SetLinks();
}
if(document.getElementById("ctl00_cphBody_hfRemoveMedia").value===""||document.getElementById("ctl00_cphBody_hfRemoveMedia").value===null)
{
document.getElementById("ctl00_cphBody_hfRemoveMedia").value=(obj).attr("mediaid");
}
else
{
var localMediaIDs=document.getElementById("ctl00_cphBody_hfRemoveMedia").value;
localMediaIDs= localMediaIDs.replace((obj).attr("mediaid"),"");
document.getElementById("ctl00_cphBody_hfRemoveMedia").value=localMediaIDs+", "+(obj).attr("mediaid");
}
}
Is there something missing in this code that would cause that?
UPDATE
thats exactly what I am using for the jquery sortable feature that actually calls the addtoDropbox Method().
// Make our dropbox a selectable & sortable.
$(".sidebar-drop-box ul").sortable({
connectWith: '.admin-left',
tolerance: "intersect",
handle: ".handle",
opacity: "0.5",
receive: function(event, ui) {
**AddToDropBox(ui.item)**;
},
start: function(event, ui) {
$(".sidebar-drop-box ul.admin-song-list").css("min-height", "70px");
isDraggingSong = true;
//soundManager.stopAll();
//$(".btn-stop").removeClass("btn-stop");
},
stop: function(event, ui) {
if ($(".sidebar-drop-box ul").children("li").length == 0) {
$(".dropTitle").fadeIn();
}
}
}); //.selectable({ filter: 'li', cancel: '.btn-stop,.btn-play,.notes,.btn-del,span.remove' });
// Do the same for our playlist.
$(".admin-left").sortable({
opacity: '0.5',
tolerance: "intersect",
handle: ".handle",
appendTo: 'appentToHolder',
items: "li.admin-song",
update: function(event, ui) {
$(ui.item).css("opacity", "0.0").animate({ opacity: "1.0" }, "medium");
if ($.browser.msie && $.browser.version == "7.0") {
$(ui.item).css("margin-bottom", "-6px");
}
},
receive: function(event, ui) {
AddToLeftList(ui.item);
},
start: function(event, ui) {
$(".admin-left li.ui-selected").removeClass("ui-selected");
isDraggingSong = true;
//soundManager.stopAll();
//$(".btn-stop").removeClass("btn-stop");
},
stop: function(event, ui) {
CheckLeftList();
},
connectWith: '.sidebar-drop-box ul'
}).selectable({ filter: 'li.admin-song', cancel: '.head *,.btn-stop,.btn-play,.notes,.btn-del,span.remove' }); // added .head * to fix bug# 1013
the bold line calls the function I added previously, which places the li element.
I am not sure exactly where the disconnect happens, but i know between these 2 code segments that it breaks something and the next click doesn't not work on the source ul. i ahve been struggling with this for days. I cant turn this back to my boss this shape...lol
thanx
It doesn't look like this function is adding something to a list.
This function first does a couple of
CSS changes to obj and it's
descendants.
Then it goes and calls the global
function SetLinks (if it is
defined).
And thirdly it sets the value of
the element
"ctl00_cphBody_hfRemoveMedia", which
is probably some kind of input.
Looks like this was pasted together from at least two other functions and would need refactoring.
I'm guessing that the cause for your lost events might be somewhere near a call to AddToDropBox.