Jquery Draggable Element Intersect - javascript

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.

Related

drag and drop feature created using jquery.ui/draggable, currently facing one issue that how to create scroll div in dropable area

In the below demo there are some inputs that we can drag and drop in the drop-zone. What I need is there any possibility that if user dragging any element then that drop-zone should be scroll-able. We have one property named "scroll:true" but it is not working. For demo please check below link
https://codepen.io/piyushSinghalDemo/pen/ddNBVv?editors=1000
$draggableOperators.draggable({
cursor: "move",
opacity: 0.7,
scroll: true,
helper: 'clone',
appendTo: 'body',
zIndex: 1000,
stop: function(e, ui) {
var $this = $(this);
var elOffset = ui.offset;
var containerOffset = $flowchart.offset();
if (elOffset.left > containerOffset.left && elOffset.top > containerOffset.top && elOffset.left < containerOffset.left + $flowchart.width() && elOffset.top < containerOffset.top + $flowchart.height()) {
var flowchartOffset = $flowchart.offset();
var relativeLeft = elOffset.left - flowchartOffset.left;
var relativeTop = elOffset.top - flowchartOffset.top;
var positionRatio = $flowchart.flowchart('getPositionRatio');
relativeLeft /= positionRatio;
relativeTop /= positionRatio;
var data = getOperatorData($this);
data.left = relativeLeft;
data.top = relativeTop;
$flowchart.flowchart('addOperator', data);
}
}
});
drag and drop feature created using jquery.ui/draggable library, however currently facing one issue that how to create scroll div in droppable area codepan for demo.

Fade out div as it's dragged near another div

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) {
}
});

jQuery draggable change image size on drag start, restore original size on revert

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);
});

How can I "destroy" a draggable object, then re-enable it again?

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/

Selected HTML DIV element draggable using JQueryUi draggable

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 )
});

Categories