We Keep Coding

Drag and Drop the images on canvas using jqueryui

I have completed the dragging and dropping of buttons and nav bar and it is draggable after drop also and working properly,
But now problem is now i want to drag and drop the image.i have tried many different things but unable to do this.
I am adding my fiddle please check
http://jsfiddle.net/Yousuf_007/d6gowym5/
Thanx

I'm now working on a project similar to yours, but in the left div I have a list and every draggable element is a list item. This function works perfect for me, maybe it will be useful for you:
$('#streams li').draggable({
helper: 'clone',
revert: 'invalid'
});
//Function for setting drag and drop settings
function foo(){
$('.foo').each(function() {
//Making dropped elements draggable again
$('.foo').draggable({
containment: $(this).parent(),
stack: '.foo',
snap: '.foo',
drop: function (event, ui) {
var pos = ui.draggable.offset(), dPos = $(this).offset();
alert("nodeid: " + ui.draggable.data("noteid") +
", Top: " + (pos.top - dPos.top) +
", Left: " + (pos.left - dPos.left));
},
drag: function(){
var draggedItemId = $(this).attr('id');
$(this).css({'z-index': '11'});
$(".class"+draggedItemId).css({'z-index':'15'});
},
stop: function(){
var draggedItemId = $(this).attr('id');
$(this).css({'z-index': '0'});
$(".class"+draggedItemId).css({'z-index':'10'});
}
});
});
}
var fooCount = $('.foo').length;
//Generating new table after drop
$('#mainDiv').droppable({
drop: function(event, ui) {
//Getting position where new item was dropped
var pos = ui.draggable.offset(), dPos = $(this).offset();
var droppedTop = ui.position.top - $(this).offset().top;
var droppedLeft = ui.position.left - $(this).offset().left;
//Generating new table if the item is dropped first time
if (!ui.draggable.hasClass('foo')) {
var Class = ui.draggable.attr("class");
var title = ui.draggable.text().trim();
var item = $('<table class="foo small elementTable ' + Class + '" name="' + title + '" id="'+(fooCount+1)+'" style="left: '+droppedLeft+'px; top: '+droppedTop+'px;"><tr class="tableHeader"><th class="thClass"><span class="header">' + title + '</span><span class="settings"><img src="Icons/pignon.png" width="17px" height="17px" alt="Settings" title="Settings" /></span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
$(this).append(item);
fooCount += 1;
foo();
}
}
});
Try to rewrite your function and give it similar look. Also change your DOM structure from separate elements to list, that will help you to easily implement drag and drop. Here is the fiddle: https://jsfiddle.net/vaxobasilidze/7gvon7h1/
EDIT: Here is your fiddle. I have initialized drag and drop. The rest, styling and what you do to your content while dropping is up to you: http://jsfiddle.net/vaxobasilidze/rhz6ovyz/

I have a draggable image and when I drop it out of an overflow/scrollable area the click function doesn't work

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

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/

Jquery Draggable Element Intersect

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.