I have four divs that are draggable. And a div where I drop the daggable divs. My code is basically just an API I've downloaded and modify a little form jQuery's sites.
My problem is that all the divs have the same function when they are dropped. How can I make individual functions to individual divs?
It looks like this:
$(function() {
$("#draggable").draggable({ revert: "invalid" });
$("#draggable2").draggable({ revert: "invalid" });
$("#draggable3").draggable({ revert: "invalid" });
$("#draggable4").draggable({ revert: "invalid" });
$("#droppable").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
if (document.getElementById('draggable')){
window.location.replace("http://www.example.com");
}
if (document.getElementById('draggable2')){
window.location.replace("http://www.example2.com");
}
if (document.getElementById('draggable3')){
window.location.replace("http://www.example3.com");
}
if (document.getElementById('draggable4')){
window.location.replace("http://www.example4.com");
}
}
});
});
No luck in this code. Any ideas?
Thanks in advance!
Regards, VG
In your 'if' statements you need to do something like:
if(ui.draggable.attr('id') === 'draggable')
{
// do stuff
}
Related
I am using JQuery UI for drag and drop in my project.
On the draggable element, I have Bootstrap (3.x) tooltip.
Moving the mouse over the draggable shows the tooltip.
I hope to remove/hide tooltip on the draggable clone when drag starts. I goolged and tested, but to no success.
Here is jsfiddle setup of the whole thing. Link: http://jsfiddle.net/mddc/6md9h/18/
<div id="draggable" class="ui-widget-content">
<div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts.">Drag me</div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
Here is javascript code:
$(function() {
$( "#draggable" ).draggable({
start: function(event, ui) {
//this is what I hope to work, but not working!
$(ui.helper).find('[data-toggle="tooltip"]').tooltip('hide');
},
helper: 'clone',
revert: "invalid"
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$('[data-toggle="tooltip"]').tooltip({
'animation': true,
'placement': 'bottom'
});
});
Thanks for any help!
You can hide you tooltip child element.
Code:
$( "#draggable" ).draggable({
start: function(event, ui) {
$(ui.helper).find('.tooltip').hide();
},
helper: 'clone',
revert: "invalid"
});
Demo: http://jsfiddle.net/9RwHh/
Why not just use
start: function(ev, ui){
$('.tooltip').remove();
}
At one point there will be only one element with "tooltip" class available in the document. So it should be a safe bet to just remove it.
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/
Hey I am using Jquery draggable droppable with table I have initialize both and its working, but the problem is the droppable area is table and the drop item is in div when I try to drop the item it show's below the table, I want the row Id on which it is placed but instead I am getting the whole table
Following are the code
JavaScript code for table
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable" ).droppable({
drop: function(event, ui) {
console.log($(this).find('tr.pen'))
$(this).append($(ui.draggable));
}
});
});
The table code is very big let me know if you can help I will happy to send you the code
I am open to any suggestion
Thank you .
If you want to drop the draggable on individual rows, then don't instantiate the droppable on the whole table but rather on the <tr>s of the table. Check if this code works for you:
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable tr" ).droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});
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.
How do I disable a jQuery draggable, e.g. during an UpdatePanel postback?
Could create a DisableDrag(myObject) and a EnableDrag(myObject) function
myObject.draggable( 'disable' )
Then
myObject.draggable( 'enable' )
To temporarily disable the draggable behavior use:
$('#item-id').draggable( "disable" )
To remove the draggable behavior permanently use:
$('#item-id').draggable( "destroy" )
To enable/disable draggable in jQuery I used:
$("#draggable").draggable({ disabled: true });
$("#draggable").draggable({ disabled: false });
#Calciphus answer didn't work for me with the opacity problem, so I used:
div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}
Worked on mobile devices either.
Here is the code: http://jsfiddle.net/nn5aL/1/
enabledisabledraggablejqueryopacityproblemhtml
It took me a little while to figure out how to disable draggable on drop—use ui.draggable to reference the object being dragged from inside the drop function:
$("#drop-target").droppable({
drop: function(event, ui) {
ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
…
}
});
HTH someone
Seems like no one looked at the original documentation. May be there was no it at that time))
Initialize a draggable with the disabled option specified.
$( ".selector" ).draggable({ disabled: true });
Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );
In the case of a dialog, it has a property called draggable, set it to false.
$("#yourDialog").dialog({
draggable: false
});
Eventhough the question is old, i tried the proposed solution and it did not work for the dialog. Hope this may help others like me.
The following is what this would look like inside of .draggable({});
$("#yourDraggable").draggable({
revert: "invalid" ,
start: function(){
$(this).css("opacity",0.3);
},
stop: function(){
$(this).draggable( 'disable' )
},
opacity: 0.7,
helper: function () {
$copy = $(this).clone();
$copy.css({
"list-style":"none",
"width":$(this).outerWidth()
});
return $copy;
},
appendTo: 'body',
scroll: false
});
I have a simpler and elegant solution that doesn't mess up with classes, styles, opacities and stuff.
For the draggable element - you add 'start' event which will execute every time you try to move the element somewhere. You will have a condition which move is not legal. For the moves that are illegal - prevent them with 'e.preventDefault();' like in the code below.
$(".disc").draggable({
revert: "invalid",
cursor: "move",
start: function(e, ui){
console.log("element is moving");
if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
console.log("illegal move");
//This will prevent moving the element from it's position
e.preventDefault();
}
}
});
You are welcome :)
Change draggable attribute from
<span draggable="true">Label</span>
to
<span draggable="false">Label</span>