I have a div, which has jQuery UI Draggable applied. What I want to do, is click and drag that, and create a clone that is kept in the dom and not removed when dropped.
Think of a deck of cards, my box element is the deck, and I want to pull cards/divs off that deck and have them laying around my page, but they would be clones of the original div. I just want to make sure that you cannot create another clone of one of the cloned divs.
I have used the following, which didn't work like I wanted:
$(".box").draggable({
axis: 'y',
containment: 'html',
start: function(event, ui) {
$(this).clone().appendTo('body');
}
});
I figured out my solution:
$(".box-clone").live('mouseover', function() {
$(this).draggable({
axis: 'y',
containment: 'html'
});
});
$(".box").draggable({
axis: 'y',
containment: 'html',
helper: 'clone'
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
}
});
Here is what I finally did that worked:
$(".box-clone").live('mouseover', function() {
$(this).draggable({
axis: 'y',
containment: 'html'
});
});
$(".box").draggable({
axis: 'y',
containment: 'html',
helper: 'clone',
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
}
});
If you're tring to move elements (say <li/>) from a #source <ul/> to a #destination <ul/>, and you'd like them to clone (as opposed to move), and still be sortable on the right, I found this solution:
$(function() {
$("#source li").draggable({
connectToSortable: '#destination',
helper: 'clone'
})
$("#destination").sortable();
});
I know it seems ultra simple, but it worked for me! :)
Here was his solution:
$(".box-clone").live('mouseover', function() {
$(this).draggable({
axis: 'y',
containment: 'html'
});
});
$(".box").draggable({
axis: 'y',
containment: 'html',
helper: 'clone'
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
}
});
Here is how I got it working:
PS: 'marker' is the object to drag and 'map' is the destination container.
$(document).ready(function() {
//source flag whether the drag is on the marker tool template
var template = 0;
//variable index
var j = 0;
$(".marker").draggable({
helper: 'clone',
snap: '.map',
start: function(event, ui) {
//set the marker tool template
template = 1;
}
});
$(".map").droppable({
accept: ".marker",
drop: function(event, ui) {
$(this).find('.map').remove();
var item = $(ui.helper);
var objectid = item.attr('id');
//if the drag is on the marker tool template
if (template == 1) {
var cloned = $(item.clone());
cloned.attr('id', 'marker' + j++);
objectid = cloned.attr('id');
cloned.draggable({
containment: '.map',
cursor: 'move',
snap: '.map',
start: function(event, ui) {
//Reset the drag source flag
template = 0;
}
});
cloned.bind("contextmenu", function(e) {
cloned.remove();
return false;
});
$(this).append(cloned);
}
i++;
var offsetXPos = parseInt(ui.offset.left - $(this).offset().left);
var offsetYPos = parseInt(ui.offset.top - $(this).offset().top);
alert("Dragged " + objectid + " to (" + offsetXPos + "," + offsetYPos + ")");
}
});
});
Related
I have a container where I want to drop an image from a menu below but when I drop it at the main container I cannot get the proper position, it seems it is dropped randomly in the container. How can I get the item dropped centered at mouse position?
var x = null;
$(function() {
$(".piece").draggable({
cancel: "a.ui-icon",
revert: "invalid",
helper: 'clone',
containment: '#container',
});
$(".piece").droppable({
accept: ".cap",
drop: function(event, ui) {
x = ui.helper.clone();
x.appendTo(this);
}
});
$(".cap").draggable({
cancel: "a.ui-icon",
helper: 'clone'
});
$("#container").droppable({
accept: ".piece",
drop: function(event, ui) {
x = $('<div/>');
x.addClass('piece-div');
x.css('top', ui.position.top);
x.css('left', ui.position.left);
x.draggable({
containment: '#container',
cursor: 'move',
});
x.appendTo(this);
x.droppable({
accept: ".cap",
drop: function(event, ui) {
var y = $('<img />');
y.attr('src', ui.helper.attr('src'));
y.css('top', ui.offset.top);
y.css('left', ui.offset.left);
y.appendTo(this);
}
});
ui.helper.remove();
}
});
});
I expect the four colored piece to be dropped centered at mouse position in the grey container but it gets dropped almost randomly. Here is a fiddle:
https://jsfiddle.net/littletrives/6p8grnsk/143/
Looks like you might just need to adjust your settings a little. These %'s work in the fiddle but you may need to adjust them with better CSS for your end purpose:
$("#container").droppable({
accept: ".piece",
drop: function(event, ui) {
x = $('<div/>');
x.addClass('piece-div');
x.css('top', '15%'); // Change this to some %
x.css('left','35%'); // Change this to some %
x.draggable({
containment: '#container',
cursor: 'move',
});
I am trying to do something very simple. I am trying to make the TRs of a table sortable with JQuery UI and also Draggable to a different div which I will use as a trash can. I have the following script. But for some reason Drag and Sort are conflicting
$("#TBL_OUTPUT").sortable({
items: 'tr:not(:first)'
});
$("#TBL_OUTPUT tr").draggable({
helper: "clone",
start: function(event, ui) {
c.tr = this;
c.helper = ui.helper;
}
});
$("#TRASHCAN").droppable({
hoverClass: "TRASH_Hover",
drop: function(event, ui) {
$(c.tr).remove();
$(c.helper).remove();
}
});
Any thoughts?
You can simply use two sortables. Like:
$("table").sortable({
items: 'tr:not(:first)',
connectWith: 'div.bin',
helper: 'clone',
start: function (e, ui) {
$('.bin').css("background-color", "red");
},
stop: function (e, ui) {
$('.bin').css("background-color", "green");
}
});
$('div.bin').sortable({
connectWith: 'table',
update: function (e, ui) {
var content = ui.item.children('td').text();
if (confirm('Delete item: ' + content + '?')) {
$('div.bin').empty();
alert('Item ' + content + ' deleted!');
} else {
alert(content + 'will stay in the bin and you can drag it back to table');
}
}
});
FIDDLE: https://jsfiddle.net/rte2by43/4/
If you want to keep droppable, this will also work:
$("#TBL_OUTPUT").sortable({
items: 'tr:not(:first)',
connectWith: '#TRASHCAN'
});
$("#TRASHCAN").droppable({
hoverClass: "TRASH_Hover",
drop: function(event, ui) {
alert($(ui.draggable).children('td').text());
}
});
I'm trying to figure out how to get the name of the image selected in a drag and drop function using jquery.
For this I am using the following code:
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
stack: '.drag',
revert: "invalid"
});
$("#droppable").droppable({
drop: function (e, ui) {
var srcc=$("#droppable").find('img').attr('src');
alert(srcc);
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
//helper: 'original',
containment: '#droppable',
tolerance: 'fit',
stack: '.drag'
});
x.resizable({
animate: true,
//aspectRatio: 16 / 9,
helper: "ui-resizable-helper",
handles: "n, e, s, w, nw, ne, sw,se"
});
x.appendTo('#droppable');
}
}
});
});
Please take a note of this line:
var srcc=$("#droppable").find('img').attr('src');
alert(srcc);
the problem is that on drop, I cannot get the name of the selected image/div!
P.S. by name of the image, I mean the actual URL of the image :
example: images/image_name.jpg
I have created a jsfiddle to explain the issue further.
please drag and drop the images in teh box bellow them and take a note of the alert(); message.
JSFIDDLE:
http://jsfiddle.net/7s1w4jgq/
Instead of $("#droppable") use ui.draggable
var srcc=ui.draggable.find('img').attr('src');
alert(srcc);
it will work.
You can also get it from ui.helper in your case because you are using helper: 'clone':
var srcc = ui.helper.find("img").attr("src")
alert(srcc);
or you could just use:
e.srcElement.currentSrc
Call ui.draggable as the selector instead of your class name
var srcc = $(ui.draggable).find('img').attr('src');
alert(srcc);
The problem is that you are not binding the element to the event.
Fiddle
I am using custom helper method which is returning a <div>, on dropping that <div> its adding it more than one time. Please look at the code to understand it better
var dropHelp = true;
$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
connectToSortable: ".droppable",
helper: function(event) {
return $('<div class="helper">Helper</div>');
}
});
$(".droppable").sortable({
placeholder: "ui-state-highlight"
}).disableSelection();
$(".droppable").droppable({
drop: function(event, ui) {
if(dropHelp){
//clone and remove positioning from the helper element
var newDiv = $(ui.helper).clone(false)
.removeClass('ui-draggable-dragging')
.css({position:'relative', left:0, top:0});
$(this).append(newDiv);
//drop the draggable source element
} else {
$(this).append(ui.draggable);
}
}
});
$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});
Here's the HTML
<button id="dropDrag">Toggle drop "Helper" or "Draggable"</button><br/><br/><br/>
<div class="product">Product 1</div>
<div class="product">Product 2</div>
<div class="product">Product 3</div>
<div class="droppable">Drop Target</div>
The full code can be find here.
I found out if we remove the connectToSortable property in draggable it will work fine. But i need that property and i am not getting the reason why it's behaving this way when connectToSortable is set.
Your drop() gets called twice because connectToSortable is also triggering a drop().
(Sortable is already a droppable)
I have edited your code to get the same result with receive function of sortable
DEMO
var dropHelp = true;
$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
connectToSortable: ".droppable",
helper: function(event) {
return $('<div class="helper">Helper</div>');
},
stop: function(){
$(this).css({opacity:1});
},
start: function(){
$(this).css({opacity:0});
},
});
$(".droppable").sortable({
placeholder: "ui-state-highlight",
receive: function(event, ui) {
if(dropHelp){
//clone and remove positioning from the helper element
var newDiv = $(ui.helper).clone(false)
.removeClass('ui-draggable-dragging')
.css({position:'relative', left:0, top:0});
$(this).append(newDiv);
//drop the draggable source element
} else {
$(this).append(ui.draggable);
}
}
}).disableSelection();
$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});
I made a sortable, resizable, draggable, with-clone portlet but when I resize it I run into a bug.
My script:
<script type="text/javascript">
$(function() {
$('#column1').draggable({
helper:'clone',
connectToSortable:'#sort',
handle:'.widget-head',
});
$('#sort').sortable({
handle:'.widget-head',
connectWith: "#sort",
out: function (e,ui) {
$("#sort").children().resizable({ axis: 'x',containment: 'parent',
resize:
function(event, ui)
{
ui.size.width = ui.originalSize.width;
}
});
}
});
});
</script>
I figured out that the problem was related to the styling and was able to fix it. The position changed to absolute every time I resized, so to handle that I'm using this:
$('#sort').sortable({
handle:'.widget-head',
connectWith: "#sort",
out: function (e,ui) {
$("#sort").children().resizable({
axis: 'x',
containment: 'parent',
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
(ui.helper).css({'position': '', 'top': '0px'});
}
});
}
});