Unsuccessful at dragging from div and dropping to another div
Hello,
I'm having a tough time figuring a couple of things out.
First of all I'm trying to drag and drop from one div to a sibling div
and can't get that to work at all.
So I then backed off to dragging from a div and appending to the body,
with hopes of then moving the dropped object into the destination
div. When I drop the object moves to the position it started from in
the palette pane e.g. left: 200, top: 200 instead of the position
where I dropped into the layout pane e.g. left: 435, top: 363. I'm
using Firebug to watch the drag position in real time.
So I then tried to get the dragger's offset with jquery (and with
straight javascript) so I could force the position of the dropped
object, but the clone's offset always comes back undefined.
My first choice would be to have easy dragging from my palette div
into my other layout div. Short of that this is what I'm having to do
to just get it into the other location.
Thanks,
ml
html code:
<body>
<div id="inspector" class="object" style="position: relative;
float:right"> // palette pane with draggable object
<div id="plasma" class="palette_object" style="position: absolute;
left: 200px; top: 200px;">
<img src="images/plasma.jpg">
</div>
</div>
<div id="layout" class="main_layout" style="position: relative;
float:left">
</div>
</body>
jQuery code:
$(".palette_object").addClass( "draggable ").draggable({
helper: "clone"
appendTo: "body" // I would rather have this be #layout, didn't work
at all
});
$("body").droppable({ // would rather use
#layout, didn't work at all
accept: ".palette_object",
tolerance: "pointer",
activeClass: "clone-active-color",
hoverClass: "droppable-hover",
drop: function( ev, ui ) {
var dropguy = $(ui.draggable.element).clone(); // don't know if
the clone is needed, but seems to be
dropguy.addClass("object cloned").removeClass("palette_object
draggable ui-draggable");
var offset =
dropguy.offset(); // kills javascript and
stops execution
var offset = $(ui.draggable.element).offset(); //
also kills javascript and stops execution
alert( offset.left + " " + offset.top );
$(this).append( dropguy );
}
});