Develop Reference

How to set correctly the relative position for Jquery Drag and Drop

I have a problem with my drag and drop function
This is my Canvas
<canvas id="note" class="lego"
width="10" height="20">
</canvas>
My Drag and drop create a clone and place it in my div (div ID is "section"), after the drop i remove his class "lego" and add a new one named "legopiazzato"
If i leave the style of the clone with "position : absolute" there is no problem.
But i need relative, because i want the top/left cordinates on the div and not the top/left cordinates on the document.
The problem is: with relative, after the drop operation, he take the mouse position absolute and, with this, set the top/left of my clone in respect of the div (my clone is placed in a different location than where I left with the drop operation)
I thought to subtract this absolute cordinates, but I don't know exactly how to do
How can i fix??
This is my DraganDrop:
$(document).ready(function () {
var x = null;
$(".lego").draggable({
helper: 'clone',
cursor: 'move',
revert: "invalid",
tolerance: "pointer",
stop: function (e, ui) {
$(".ui-draggable-dragging").addClass("legopiazzato");
$(".ui-draggable-dragging").removeClass("lego");
$(".ui-draggable-dragging").dblclick(function() {
$(this).remove();
});
$(".legopiazzato").draggable({
cursor: 'move',
grid: [ 1,1]
});
}
});
$("#section").droppable({
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
console.log(ui.position.left);
console.log(ui.position.top);
x.draggable({
helper: 'original',
containment: '#section',
tolerance: 'fit'
});
x.appendTo('#section');
}
}
});
});

jQuery UI sortable - dynamically change content on drop

I have two blocks, one is "draggable only" and the other is "droppable only".
Inside the first one I have some images which I can drag and drop them into the second one.
After I drop the image from the first block into the second one I want to replace the dropped image with a bigger image.
I'm thinking to use replaceWith() method but the problem is that is replacing also the parent element.
For example, I have this in the "draggable only":
<li class="draggable ui-draggable ui-draggable-handle" id="header-1">
<img src="http://placehold.it/150x100">
</li>
and this in the "droppable only" after the element is dragged from the "droppable only":
<img src="http://placehold.it/400x300">
As you noticed the replaceWith() is replacing the parent element also and I don't want this.
Also I need way to dinamically add an image based on what item was dragged.
Right now, is like this :
$('.testing').replaceWith('<img src="http://placehold.it/400x300">');
This will replace every item with the same image and I don't want this.Every item should have it's own image.
This is the JS code for the "draggable only":
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).addClass('testing');
}
});
and this is fro the "droppable only":
$(".sortableList").sortable({
receive: function (event, ui) {
//alert('It works');
$('.testing').replaceWith('<img src="http://placehold.it/400x300">');
}
});
Here's a JSBIN ( HOVER OVER "HEADERS" AND DRAG AND DROP THE IMAGE OVER THE CONTAINER IN THE RIGHT)

Put addClass("testing") inside function of recieve under sortable method instead of inside start of draggable method, it should work
$(".sortableList").sortable({
receive: function (event, ui) {
//alert('It works');
$(this).addClass('testing');
$('.testing').replaceWith('<img src="http://placehold.it/400x300">');
}
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
//Not here
}
});
Jsbin
Check the Updated Working Fiddle

Maintaining js while appending elements

I'm not super experienced and was hoping someone could give me some tips.
I'm trying to create a system where images can be transferred from a holding container to a manipulative container where they can be re-sized and dragged.
I have a manipulative here: Fiddle Demo
And am trying to get the "click in/double-click out" system to work here: Fiddle Demo
<div class="frame"></div>
<div class="inventory">
<images>
</div>
$(".frame img")
.draggable({
containment: "parent",
cursor: "move"
}).resizable({
aspectRatio:1,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$('.inventory img').click(function(){
$(this).appendTo(".frame");
});
$('.frame img').dblclick(function(){
$(this).appendTo(".inventory");
$(this).removeClass('added');
});
The main problem I believe is that once I append the divs, the js doesn't refresh and apply based on the arrangements of elements.
Any help would be greatly appreciated!
Thank you!

Since the evaluation of the selectors need to be dynamic you need to use event delegation
$('.inventory').on('click', 'img', function () {
$(this).appendTo(".frame");
});
$('.frame').on('dblclick', 'img', function () {
$(this).appendTo(".inventory");
$(this).removeClass('added');
});
Demo: Fiddle
Note: This will not handle the resizable/draggable behaviors - you will need to manually destroy/add this behaviors when you move the element from one container to another one

I updated Arun P Johny's fiddle: http://jsfiddle.net/u4xKW/2/.
$(".frame img")
.draggable({
containment: "parent",
cursor: "move"
}).resizable({
aspectRatio: 1,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
});
$('.frame').on('dblclick', '.ui-draggable', function () {
$(this).appendTo(".inventory");
$(this).draggable("destroy");
$("img", this).resizable("destroy");
});
This adds and removes the draggable and resizable functions from the items when they are added and removed.

Jquery UI Draggable: Align helper to mouse position

With jQuery I have a draggable element. It's a div with a size of 200 x 40.
Of course the user can start dragging this div by clicking at variuos positions in the div.
What I want is when the startdrag event happens, the helper (clone) div will always be aligned to the cursor the same way, no matter where in the div the user started dragging.
So after the mousedown the helper's top and left values need to be the same as the mouses x and y. I've tried this using this coffeescript code:
onStartDrag: ( e, ui ) =>
ui.helper.css
left: e.clientX
top: e.clientY
console.log( e )
But it doesn't work and my guess is that this is happening because the values I put in are directly overwritten by the draggable plugin because of mouse movement..
Any ideas?

After trying Amar's answer and realizing that it screws up interactions with droppable, I dug deeper, and found that there is an option specifically to support this called cursorAt.
$('blah').draggable
helper: ->
... custom helper ...
cursorAt:
top: 5
left: 5
This places the top-left corner of the helper 5 pixels above and to the left of the cursor, and interacts correctly with droppable.
http://api.jqueryui.com/draggable/#option-cursorAt
And let's give credit where credit is due. Thanks, jquery-ui mailing list archives!
https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw

Try setting like this,
start: function (event, ui) {
$(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left);
$(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top);
}
Take a look at this jqFAQ.com , it will be more helpful for you.

I've found a fix for this and it's very easy, if you are using the sortable plugin you can fix the helper position like this:
sort: function(e, ui) {
$(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}

I Agree with #roverv.
This works fine form me.
$('.js-tire').draggable
tolerance: 'fit',
appendTo: 'body',
cursor: 'move',
cursorAt:
top: 15,
left: 18
helper: (event) ->
$('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
start: (event, ui) ->
if $(event.target).hasClass 'in-use'
$('.js-send-to-maintenance-box').addClass 'is-highlighted'
else
$('.ui-droppable').addClass 'is-highlighted'
stop: (event, ui) ->
$('.ui-droppable')
.removeClass 'is-highlighted'
.removeClass 'is-dragover'

This did the trick for me:
appendTo: 'body'
Like so:
$(this).draggable({
helper: "clone",
cursor: "move",
appendTo: 'body'
});

Drag drop and calculating width

I want to calculate and select drop area in my drag&drop application.
What I want to make:
When i drag box to top or bottom of the droppable div, width must be 100%
When i drag box to near the other box, (if one box in a row) their widths must be 50% - 50%
If a drag box and change place which box is already in wrapper, they must be calculated like that again.
Here is my example code
$(".box").draggable({
snap: '#droppable',
snapMode: 'outer',
revert: "invalid",
cursor: "move",
helper: "clone"
//connectToSortable: "#droppable"
});
$("#wrapper").droppable({
drop: function(event, ui) {
var dropped = $(ui.draggable).clone();
var droppedOn = $(this);
$(dropped).detach().css({
top: 0,
left: 0
}).appendTo(droppedOn);
$(this).addClass("ui-state.highlight").find("p").html("");
}
});
Can you please tell me the way how can I do that?
Thanks

Take a look at this JQFAQ.com topic, this will help you to set the calculated width and we can drop the elements in specified area. There are few more sample FAQs too.