cloned "draggable" element's doesn't react to "droppable" areas - javascript

Hay I'm using this code to clone a draggable element
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
$(".droppable").droppable({accept: ".draggable"});
Which works great. However, the "cloned" object no long reacts to "droppable" areas.
Is there any way around this? Can i make the draggable live? So any new .draggable elements react with the droppable one?

You have to declare an drop-event function to interact on droppable.
see Here
Every clone interacts with the droppable.
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
$(".droppable").droppable({accept: ".draggable",
drop: function( event, ui ) {
$( this )
.addClass( "dropped" ).find( "> p" )
.html( document.lastModified );;
}
});

try like this
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
//re-make objects draggable
$('.draggable').draggable({helper: "clone"});
});
...

Did this as an example for a different post.
http://jsfiddle.net/hHKh9/2/
I think you are missing helper:'clone' on the droppable

Related

jQuery UI Draggable - show position on grid [duplicate]

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there.
As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat in my droppable areas. When items are dropped they seem to get a position set to them as they no longer float nice and neat like the rest of my items. For reference, here is my javascript.
$('.drag_span').draggable({
revert: true
});
$('.drop_div').droppable({
drop: handle_drop_patient
});
function handle_drop_patient(event, ui) {
$(this).append($(ui.draggable).clone());
$(ui.draggable).remove();
}
Check out http://jqueryui.com/demos/droppable/#visual-feedback.
Ex:
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({
accept: "#draggable2",
activeClass: "ui-state-hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
This should work for adding a highlight on hover.
$('.drop_div').droppable({
hoverClass: "highlight",
drop: handle_drop_patient,
});
Then create a css class for highlight that sets the border or changes the background color or whatever you'd like.
.highlight {
border: 1px solid yellow;
background-color:yellow;
}
As far as the position is concerned you can reapply css once the drop is complete.
function handle_drop_patient(event, ui) {
$(this).append( $(ui.draggable).clone().css({'float':'left','display':'block'}) );
$(ui.draggable).remove();
}
FYI: hoverClass has been deprecated in favour of classes option. It should now be:
$('.drop_div').droppable({
classes: {
'ui-droppable-hover': 'highlight'
},
drop: handle_drop_patient
});

Jquery UI Draggable clone disappearing

I am trying to use the jquery-ui draggable to make some element draggable.
I set the helper option to clone the current element.
It's making the clone correctly but when I drop the clone disappears. It doesn't stay at the dragged place.
See this for Demo Fiddle Link
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone();
}
});
What am I missing ?
There maybe a simpler way, but through data of draggable, you can target a property that deals with this. Like this:
stop : function(e, ui){
$('#drag').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
}
fiddle: http://jsfiddle.net/n10ucrLd/
I think there's been a lot of troubles with helper: 'clone'. I always got it to work, when I defined a droppable as well. E.g.:
HTML:
<div id="drag">Drag This</div>
<div class="container"></div>
JavScript:
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone(true);
}
});
$( ".container" ).droppable({
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
Live example: http://jsbin.com/vibeqaganu/1/edit?html,css,js,output

Drop is called when draggable is leaving nested sortable

I have Droppable div with nested Sortable and Draggable which is connected to the Sortable and is accepted by the Droppable.
<div id="droppable">
<div id="nested-sortable"></div>
</div>
<div class="draggable">
test
</div>
jQuery (2.0.2)
$("#droppable").droppable({
accept: ".draggable",
drop: function() {
console.log('Dropped'); //This should be called on drop!!
}
});
$("#nested-sortable").sortable({
placeholder: 'item',
});
$(".draggable").draggable({
connectToSortable: "#nested-sortable",
helper: "clone"
});
My problem is that when I drag the Draggable over the Sortable, drop event is triggered. I don't understand why - I haven't dropped it.
I reproduced it in this fiddle: http://jsfiddle.net/9ydp3L7q/3/
Thanks
I found a dirty workaround. I really don't like it but it seems to work alright.
I ignore drop if the helper has ui-sortable-helper (which it gets when it's over the sortable).
$("#droppable").droppable({
accept: ".draggable",
drop: function(event, ui) {
if (ui.helper.hasClass("ui-sortable-helper")) {
return;
}
console.log('Dropped');
}
});
But I have to remove the class manually on out of the sortable. If I try to just remove the class I get into and infinate loop (and javascript on the page crashes) - so I had to do it in timeout.
$("#nested-sortable").sortable({
placeholder: 'item',
out: function(event, ui) {
// this looks kind of dirty to me
setTimeout(function () {
$(ui.helper).removeClass("ui-sortable-helper")
}, 1);
}
});
Fixed fiddle: http://jsfiddle.net/9ydp3L7q/6/
Use disable for sortable while using draggable. and Use disable for draggable while using sortable.
$( ".selector" ).sortable( "disable" );
$( ".selector" ).draggable( "disable" );
or
$('.selector').draggable({
disabled: false
});
$(".selector").sortable({
disabled: false
});

How do I get a value where a drag-able element dropped?

I'm now developing a website that can drag elements and drop into a table cells (each cell has its "ID")
Now I can drag and drop the element to the cells but I want to know
How to get the ID of table cell where I dropped the element?
here's the picture's concept.
Suppose that cell's ID are the combination of row and column number.
At first you need to rename yours IDs because one ID can't start with a number. You neet at lest one letter, example "ID11" "ID12" ...
Than what are the Cells? div? Td? Input?
Can you a jsfiddle ?
-Edit.
you need something like thise:
jsfiddle
you must only change your skript to:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log("Dropped to" + $(".drop").attr("id"));
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
Here is the working fiddle.
Try something like this:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log($(this).attr('id'));
}
});
});
Check this fiddle.
First you need to enable the table cells to be dragged to by defining ondragover event callback. In the fiddle:
box.ondragover = function (evt) { evt.preventDefault(); };
preventDefault ensures that the browser does not set a dropdown lock on the element.
Then you simply play around with the event data, like this:
box.ondrop = function (evt) { droppedTo.innerHTML = evt.toElement.id; };
toElement holds reference to the element that you drop on, and you can get all the data you need from it, including id.
You need to change your script like this
$(function () {
$("#draggable").draggable({
snap: ".drop"
});
$(".drop").droppable({
drop: function (event, ui) {
alert($(this).attr("id"));
console.log("Dropped to " + $(this).attr("id"));
}
});
});
Change from $(".drop").attr("id") to $(this).attr("id") to get the id of the element that you are dropping into :)
Example http://jsfiddle.net/81ja79Ls/4/

Can an input (type=text) be a jQuery droppable?

I am trying out jQuery-UI drag-drop feature.
I was able to easily convert a div into a droppable but making a text box a Droppable doesn't work.
jQuery('input[type=text]:visible').droppable({
drop: function (e, ui){
console.log('dropping',ui); //--> this never gets called
jQuery(this).val(jQuery(ui.helper).text());
}
});
Is it the case that the default browser behavior prevents text fields and text areas from being droppables?
EDIT:
It doesn't work only when the input field is a part of a draggable..
http://jsfiddle.net/guNTP/4/
<span>hello world!<input></span>
$("input").droppable({
drop: function(event, ui) {
alert(ui.draggable.text());
}
});
$("span").draggable({helper:function(){
return jQuery("<span>hello</span>");
}});
Yes, it can be: http://jsfiddle.net/guNTP/
$("#myinput").droppable({
drop: function(event, ui) {
$(this).val( $(this).val() + ui.draggable.text());
}
});
$("span").draggable({revert:true});

Categories

Resources