I have a div that is draggable along the Y axis. When the div hits 50px, I destroy the draggable element, then preform a animation to move it back to the start, how can I enable the element to become draggable again once the animation completes?
here is a Fiddle
$( ".box" ).draggable({
axis: "y",
drag: function( event, ui ) {
y2 = ui.position.top;
x2 = ui.position.left;
$('.result').text(y2);
if (y2 > 100) {
$( ".box" ).draggable('destroy')
$('.box').animate({
top:0
}, {
duration:500,
complete: function() {
//$( ".box" ).draggable('enable');//doesn't work
$( ".box" ).draggable({axis: "y"});
}
})
}
}
});
You should rather do this:
object.draggable( 'disable' )
This will disable the object and it wont be draggable.
object.draggable( 'enable' )
After that you can re-enable the drag on the object.
With a bit of tweaking user2436738's answer will work.
You just need to prevent the drag events from updating the position whilst you're animating the box back to its original position:
var reverting = false;
$(".box").draggable({
axis: "y",
drag: function(event, ui) {
var y2 = ui.position.top;
var x2 = ui.position.left;
$('.result').text(y2);
if (reverting){
event.preventDefault();
event.stopImmediatePropagation();
} else if (y2 > 100) {
reverting = true;
revertDrag($('.box'));
}
}
});
function revertDrag(element){
element.draggable('disable');
element.animate({
top: 0
}, {
duration: 500,
complete: function() {
reverting = false;
element.draggable('enable');
}
})
}
Here is a working example: http://jsfiddle.net/Sly_cardinal/F3h2Q/12/
Related
I have a draggable div that can be dropped into a droppable div. This works fine. The draggable div contains a span element. I would like this span element to fade out as it approaches the droppable div.
I have a draggable fadeout/in example based on another answer, which applies to when you drag the element to the side of the window. I tried modifying this to fit my needs but it doesn't sem to be working for some reason.
Drag the red sqaure to the right handside. you will notice it fades in/out as you drag it.
Demo Fiddle http://jsfiddle.net/EybmN/32/
$('#draggable').draggable({
drag: function(event, ui) {
console.log(ui.helper.find('span'));
ui.helper.find('span').css('opacity', 1 - ui.position.left / $(window).width());
}
});
My attempt of modifying this to have the behaviour explained above.
Demo http://jsfiddle.net/EybmN/30/
$('#draggable').draggable({
drag: function(event, ui) {
console.log(ui.helper.find('span'));
$el = $('.droppable.blue');
var bottom = $el.position().top + $el.outerHeight(true);
var $span = ui.helper.find('span');
$span.css('opacity', 1 - $span.top / bottom);
}
});
You need to get the ui position. Then you need to calculate that with the distance from the div.
Fiddle http://jsfiddle.net/EybmN/34/
$('#draggable').draggable({
connectToDroppable: '.droppable',
revert: 'invalid',
drag: function(event, ui) {
var $span = ui.helper.find('span');
var opacity = ((ui.helper.offset().top - ui.helper.outerHeight()) - ($('.droppable.blue').offset().top + $('.droppable.blue').outerHeight())) / 100;
$span.css('opacity', opacity);
}
});
$(".droppable").droppable({
accept: '#draggable',
drop: function(event, ui) {
}
});
Edit
If you would like it more gradual, then get the start position and then calculate the percentage based on the dragging position.
Fiddle http://jsfiddle.net/EybmN/35/
var startPos = 0;
$('#draggable').draggable({
connectToDroppable: '.droppable',
revert: 'invalid',
drag: function(event, ui) {
if(!startPos) startPos = ui.helper.offset().top;
var $span = ui.helper.find('span');
var opacity = (ui.helper.offset().top - (ui.helper.outerHeight()*2.5) - ($('.droppable.blue').offset().top + $('.droppable.blue').outerHeight())) / startPos + .5;
$span.css('opacity', opacity);
}
});
$(".droppable").droppable({
accept: '#draggable',
drop: function(event, ui) {
}
});
I have a scrolling div that has images inside of it. I drag the image outside of the scrolling area and drop it onto another area.
When I drop it onto the area I want to record the x and y value for where the image is and use an ajax call to record it to a database. At the moment I am able to get the x and y in an alert when it is dropped but it doesn't save it when it drops. It will save to the database when I click the image after I place it onto the area.
$('.dragthis').draggable({
cursor: 'pointer',
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: 'body',
scroll: false
});
$("#dragarea").droppable({
accept: '.dragthis',
hoverClass: 'hover',
tolerance: 'touch',
drop: function(event, ui){
if (ui.draggable.hasClass('dragthis')) {
$(this).append(ui.draggable); ui.draggable.css('top', ui.position.top);
ui.draggable.css('left', ui.position.left);
ui.draggable.css('position', 'absolute');
ui.draggable.draggable('destroy').draggable();
}
var offset = $(this).offset();
var relativeX = (event.pageX - offset.left);
var relativeY = (event.pageY - offset.top);
alert("X: " + relativeX + " Y: " + relativeY);
$('img').click(function(){
var name = $(this).attr('src');
alert(name);
$.ajax({
method:"POST",
url:"set.php",
data: ({xValue: relativeX, yValue: relativeY, nameValue: name}),
});
});
}
});
I have a set of divs all different sizes with the same class .gjg-item. I have it so you can drag and drop these divs into each others positions.
How can I tell jquery to not only shrink the image on dragstart but to resotre it to it's original size on revert?
Here is the code I am using:
$('.gjg-item').draggable({snap: true, snapMode: 'inner', revert: 'invalid'});
$('.gjg-item').droppable({accept: '.gjg-item', hoverClass: "ui-state-hover"});
$('.gjg-item').on('dragstart', function(event, ui) {
$(this).css('z-index', '9999999').width(50).height(50);
$(this).find('img').width(50).height(50);
});
$('.gjg-item').on("dropover", function(event, ui){
var draggingImgID = ui.draggable[0].id;
var hoverPositionSize = $(this).width();
if($(this).attr('data-pid') != draggingImgID) {
$(this).css('opacity', '.2');
}
});
$('.gjg-item').on("dropout", function(event, ui){
$(this).css('opacity', '1');
});
$('.gjg-item').on("drop", function(event, ui){
$('.gjg-item').draggable('destroy');
$('.gjg-item').droppable('destroy');
var idOfItemDropped = ui.draggable[0].id; // css id of item being dropped
idOfItemDropped = idOfItemDropped.replace('gjg-i-', ''); // parse the id
var droppedImgOldPosition = $('#gjg-i-'+idOfItemDropped).attr('data-position'); // get the image being dropped old position
var droppedImgNewPosition = $(this).attr('data-position'); // get the new position where the image was dropped
//console.log('hello');
$.post( DOMAIN+LIBRARY+"grid/ajax/ajax_dragndrop.php", { gridID: gridID, imageID: idOfItemDropped, oldPosition: droppedImgOldPosition, newPosition: droppedImgNewPosition}, function(data) {
if(data.code == 200) {
$('.gjg-item').remove();
ajaxArea('ni');
}
});
});
You can add code to resize the image of dragstop event like this:
var original_height = 100;
var original_width = 100;
$('.gjg-item').on('dragstop', function(event, ui) {
$(this).css('z-index', '9999999').width(original_width).height(original_height);
$(this).find('img').width(original_width).height(original_height);
});
I've an array of jQuery objects which are draggable.
What I want is when any element present in the array is dragged, All other elements should also be dragged.
Following is sample code that I have tried but I haven't got any success
$(event.target).parents('.ui-class-name').draggable({
disabled : false,
helper: function() {
var allSelectedEle = $($selected).map( function() {
return this.toArray()
});
return allSelectedEle;
}
});
Here $selected is the array of jQuery object
Update: Here is the sample markup
You need to save initial coordinates of elements, and update them while you dragging them (demo):
var els = $('.eq-ui-widget')
var coords = { x: 0, y: 0 }
function getSelected() {
return els.filter('.selected')
}
els
.draggable({
disbled: true,
drag: function(e, ui) {
getSelected().each(function() {
var orig = $(this).data().orig
$(this).css({
top: orig.top + (ui.position.top - coords.y) ,
left: orig.left + (ui.position.left - coords.x)
})
});
},
start: function(e, ui) {
coords.x = ui.position.left;
coords.y = ui.position.top;
getSelected().each(function() {
$(this).data().orig = $(this).position();
});
}
})
.on('click', function(event) {
if(!event.ctrlKey) return;
$(event.target).toggleClass('selected');
/*logic for dragging all selected elements simultaneously*/
var selected = getSelected()
els.draggable('option', 'disabled', true )
selected.draggable('option', 'disabled', false )
});
I wanna make if Dragged element intersect any draggable elements dragged items revert old position. Any Idea About it?
$( "#MainContents div[name=draggable]" ).each(function() {
$( this ).draggable({containment: 'parent',
scrollSpeed: 1000,
cursor: "crosshair",
scroll:true,
disabled: DragDropState,
stop: function(event, ui) {
var Stoppos = $(this).position();
var parentPosition=$(this).parent().position();
var CalculatedTop=Stoppos.top-parentPosition.top;
var CalculatedLeft=Stoppos.left-parentPosition.left;
}
});
});
you'll need to record where it came from on dragging start and then check for an overlay on dragging stop. check out this jsfiddle example
in a nutshell, extend your draggable options array to include start, record the top/left position in a data object, then on stop, check other draggable items in the DOM and call a revert function if anything matches.
ex:
$( this ).draggable({
start: function() {
var div = $(this);
div.data('top', div.css('top'));
div.data('left', div.css('left'));
},
containment: 'parent',
scrollSpeed: 1000,
cursor: "crosshair",
scroll:true,
disabled: DragDropState,
stop: function(event, ui) {
var draggables = $('.ui-draggable');
var div = $(this);
var goHome = function () {
div.css('left', div.data('left'));
div.css('top', div.data('top'));
};
draggables.not(div).each(function () {
var curr = $(this);
var currPos = curr.position();
var divPos = div.position();
if (divPos.left >= currPos.left && divPos.left <= (currPos.left + curr.width())) {
if (divPos.top >= currPos.top && divPos.top <= (currPos.top + curr.height())) {
goHome();
}
}
});
};
});
i'm pretty sure something like this is what you're looking to do. btw, from here you can animate the revert function so it gracefully goes back where it was last at.