I have a simple drag and drop using jquery ui. I want to clone the element and drop the clone at the cursor position.
$(function() {
$( "#draggable" ).draggable({
grid: [ 20, 20 ],
//helper: 'clone',
});
$("#dropzone-panel").droppable({
drop: function(event, ui) {
console.log("Drop Event Fired");
}
});
});
I can drag the element and when I drop it, it stays in the correct position.
But I don't want to move the original, I want to clone it, and then drop the clone in place.
I tried calling clone and adding an appendTo in the drop function, but this just appends it to the end of the #dropzone-panel, rather than leaving it in place.
Any idea what I need to do, to clone and drop at the cursor position?
I would setup the draggable with the helper option and then the droppable with the accept option. This might look like:
$(function() {
$(".draggable").draggable({
helper: 'clone',
grid: [ 20, 20 ],
appendTo: ".droppable"
});
$(".droppable").droppable({
accept: ".draggable",
drop: function(e, ui) {
var pos = ui.position;
var $obj = ui.helper.clone();
$obj.css({
position: 'absolute',
top: pos.top + "px",
left: pos.left + "px"
});
$obj.appendTo(".droppable");
}
});
});
You will want to make use of CSS to wrap your Droppable in a Div that has position: relative; to ensure that the absolute positioning of the appended element is maintained.
Related
in my code i want divs and draggables elements dynamically, my problem is that the draggable elements are moving along the bottom of the div when scrolling, and I need that when I drag them over the div they don't move when scrolling the page.
The code jsFiddle
$(".signatureImage").on("mousedown mouseup", function(e) {
}).draggable({
containment: ".documents",
cursor: "all-scroll",
scroll: false,
//helper: "clone",
grid: [5, 5],
zIndex: 1000,
drag: function(event,ui){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
},
stop: function(e, ui) {
var finalxPos = ui.position.left;
var finalyPos = ui.position.top;
console.log('Stop: '+finalxPos + ' - '+finalyPos);
jQuery.post("ajaxs/",
{
finalxPos: finalxPos,
finalyPos: finalyPos,
}, function(data)
{});
}
}).each(function(i, item){
});
Drag the element inside the div and then use the scroll of the containerDocuments div, you will see that the draggable elements are moving along with the scroll
Consider the following example.
Fiddle: https://jsfiddle.net/Twisty/n5yrtou1/16/
JavaScript
$(function() {
$(".signatureImage").draggable({
containment: ".documents",
cursor: "all-scroll",
scroll: false,
grid: [5, 5],
zIndex: 1000,
stop: function(e, ui) {
var finalxPos = ui.position.left;
var finalyPos = ui.position.top;
console.log('Stop: ' + finalxPos + ' - ' + finalyPos);
}
});
$("#containerDocuments").droppable({
drop: function(e, ui) {
var el = ui.helper.detach();
el.css({
top: "",
left: "",
position: "absolute",
"z-index": 1000
}).appendTo(this).position({
my: "center",
at: "center",
of: e
});
}
});
});
Using Droppable, you can detach the Draggable element and attach it to your DIV. It is then a matter of positioning it. You can do this in many different ways, yet I opted to base it on the Event.
Initially, with your code, when you dragged it and stopped, it was given a Top & Left position based on the relative position to it's parent. When you drop it, the new position has to be relative to the new target element. You can do this with .offset(), yet it's complicated.
This allows the user to drag an element from the right onto the images, it attaches, and now when the user scrolls, the image scrolls with the rest of the DIV.
See More:
https://jqueryui.com/droppable/
https://jqueryui.com/position/
Spelling app. I have a bunch of letter tiles, user clicks a tile and drags it (a clone) down to spell a word. But they can currently drop them ONTO the tiles they're supposed to be choosing from (div "#tiles"). I have it set up so that if they drag them BACK there, they disappear, but I can't figure out how to destroy them on that initial drag.
putting $(ui.helper).remove(); and ui.remove(); together in my droppable : drop solves it, makes the cloned tile disappear. But it also destroys the functionality of the original tile (it's still visible but no longer draggable).
$(function() {
$('.tiles').draggable({
helper: "clone",
snap: true,
scroll: false,
containment: 'window',
snapTolerance: 30,
start: function(e, ui) {
ui.helper.addClass("clones");
}
});
$('.tiles').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable({
snap: true,
snapTolerance: 30,
scroll: false,
containment: 'window',
classes: {
"ui-draggable": "clones"
}
}));
});
$('#optionbar').droppable({
accept: ".tiles",
drop: function(event, ui) {
$(ui.helper).remove();
}
});
$('#tiles').droppable({
accept: ".tiles, .clones",
drop: function(event, ui) {
console.info("inside2");
$(ui.helper).remove();
// ui.remove(); //this makes it vanish (yay) but also kills it (oops)
}
});
});
On first drag the cloned tile isn't removed. If I pick up the same tile and drag it again, it is. I want them to be destroyed on FIRST drag if they are dropped inside #tiles, but I need my original unmoved tile to remain.
I've been working on a drag and drop UI with jquery UI.
I have a bunch of elements like this, that are draggable:
<i class="fa fa-laptop fa-fw"></i> Server
I can drag and clone this onto a drop zone. But when I start dragging the original element, I want to change the HTML to be
<i class="fa fa-laptop fa-5"></i>
The current code looks like this, but should I be doing something in the start event handler to clone, and change the html of the cloned element?
function MakeDraggable(ele) {
ele.draggable({
grid: [20, 20 ],
//revert: "invalid",
helper: 'move'
});
}
$(function() {
// Make the .draggable class a Draggable
//
$( ".draggable" ).draggable({
grid: [ 20, 20 ],
helper: 'clone',
appendTo: '#dropzone-panel',
start: function(event, ui) {
console.log("Dragging me.....");
}
});
// Setup the dropzone
//
$("#dropzone-panel").droppable({
drop: function(event, ui) {
console.log("Drop Event Fired");
// Get the original element id
var id = ui.draggable.attr("id");
// If this element is a copy already
// then dont clone it.
//
if (id.indexOf("-copy-") >= 0) {
console.log("This is a copy");
} else {
// This is the orginal, so clone and create a new id
var number_of_clones = document.querySelectorAll('*[id^="'+id+"-copy-" +'"]').length;
console.log("found [" +number_of_clones +"] copies");
var pos = ui.position;
var $obj = ui.draggable.clone().attr("id", id+"-copy-"+number_of_clones);
$obj.css({
position: 'absolute',
top: pos.top + "px",
left: pos.left + "px"
});
$obj.appendTo("#dropzone-panel");
// Make the clone draggable
MakeDraggable($obj);
}
}
});
I have an image that I drag from one part of the page and drop into a DIV. No problem. But when I just drag the image around inside its new DIV home, I still trigger the DIV's drop handler. Is there an easy way to disable the drop handler for elements that are already in the droppable?
Thanks
You can add a class to the dropped element, then in the drop function check if the element have that and if so exit the drop function.
In my example I clone the element in a new one on drop, if you use the dragged you must change the selected element.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
alert('dropped');
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/hLxAd/
Hey I am using Jquery draggable droppable with table I have initialize both and its working, but the problem is the droppable area is table and the drop item is in div when I try to drop the item it show's below the table, I want the row Id on which it is placed but instead I am getting the whole table
Following are the code
JavaScript code for table
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable" ).droppable({
drop: function(event, ui) {
console.log($(this).find('tr.pen'))
$(this).append($(ui.draggable));
}
});
});
The table code is very big let me know if you can help I will happy to send you the code
I am open to any suggestion
Thank you .
If you want to drop the draggable on individual rows, then don't instantiate the droppable on the whole table but rather on the <tr>s of the table. Check if this code works for you:
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable tr" ).droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});