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

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/

Related

How to get jQuery sortable list order?

I am using jQuery Sortable to allow users to drag and drop elements on the page. When a user drags a div I need to get the updated order of the list and pass it to the back end. So far I've tried:
$( function() {
$( "#sortable" ).sortable({
axis: 'y',
stop: function (event, ui) {
var data = $(this).sortable('serialize');
alert(data);
$.ajax({
data: oData,
type: 'POST',
url: '/url/here'
});
}
});
$( "#sortable" ).disableSelection();
} );
but this makes the animation really not smooth and alerts no data. How do I get a position list every time a user drags and drops a div?
JSFIDDLE
There's a refreshPositions() function you can use that returns a object representing the sortable item. You can then obtain the updated list of children by making a call to .children() on that object.
Save the positions to a variable in the stop event, which is triggered after you have finished sorting.
I've updated your function to include the stop event:
$("#sortable").sortable({
stop: function(ev, ui) {
//Get the updated positions by calling refreshPositions and then .children on the resulting object.
var children = $('#sortable').sortable('refreshPositions').children();
console.log('Positions: ');
//Loopp through each item in the children array and print out the text.
$.each(children, function() {
console.log($(this).text().trim());
});
}
});
Updated Fiddle
Instead, use the toArray() method, detailed here: http://api.jqueryui.com/sortable/#method-toArray

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

Display hidden element with the help of jquery

I have some code in a jsfiddle and I want to display one hidden element <div id="e1"></div>
I have written code for this in jquery like this:
$("#credit4").sortable({
receive: function (event, ui) {
ui.item.remove();
var s="PLEASE SELECT ANOTHER BLOCK";
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()',1500);
}
});
credit4 is the id of a draggable element and when the user wants to drag the element then this hidden elemet should be displayed.
You can also check my jsfiddle here - http://jsfiddle.net/sanjayrathod7/5cZD5/44/.
Please suggest me where I'm wrong.
Here's a simplified fiddle with a set of alerts in place indicating which line is hiding #e1. You can see that you're probably hiding it when you didn't intend to (at lines 45 and 171):
http://jsfiddle.net/isherwood/5cZD5/50
$("#credit").sortable({
receive: function (event, ui) {
ui.item.remove();
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()', 1500); alert('hiding 10');
}
});
I have find out the answer
Try this
$( "#credit4" ).draggable({
revert: true,
start: function( event, ui ) {
var s="PLEASE SELECT ANOTHER BLOCK";
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()',1500);
}
});

How do I control the style of the clone of a draggable div when moved to a sortable container?

What I'm trying to do is combine two projects:
One is an example of draggable and sortable list-items
The other is jEditable, which I'm using to make the list-items editable
Now I was able to append the edit class to the existing list items in the first link without any trouble. When I go to create a new draggable item (a clone) and move it to the sortable list, I want it to take on the css class of the older items. I have tried adding code to the draggable's stop event and the sortable's receive event with no luck. It's the original's style that changes, not the clone's.
receive: function(event, ui) {
alert("dropped item ID: " + ui.item.attr('id'));
$("#draggable").attr('class', 'edit');
}
stop: function() {
if ( !$( "#draggable" ).hasClass( "ui-state-hover" ) ) {
$( "#draggable" ).removeClass( "ui-state-highlight" );
$( "#draggable" ).addClass( "ui-state-default" );
$( "#draggable" ).addClass( "edit" );
}
}
How can I achieve this?
JSFiddle is here
You can actually utilize the ui in your sortable event stop. Here short definition of them:
ui.
helper: The jQuery object representing the helper being sorted
item: The jQuery object representing the current dragged element
offset: The current absolute position of the helper represented as { top, left }
position: The current position of the helper represented as { top, left }
originalPosition: The original position of the element represented as { top, left }
sender: The sortable that the item comes from if moving from one sortable to another
So you need to use stop event and change the ui.item style like this:
$(ui.item).attr('class', 'ui-state-default edit');
And you have to re-initiate the editable like this:
$(document).ready(function() {
initEditable();
});
function initEditable(){
$('.edit').editable('http://www.example.com/save.php', {
indicator : 'Saving...',
tooltip : 'Click to edit...'
});
$('.edit_area').editable('http://www.example.com/save.php', {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : '<img src="img/indicator.gif">',
tooltip : 'Click to edit...'
});
}
$(function() {
$( "#sortable" ).sortable({
revert: true,
update: function() {
var orders = [];
$.each($(this).children(), function(i, item) {
orders.push($(item).data("x"));
});
$("#info").text("Order: " + orders.join(","));
},
stop: function(event, ui) {
$(ui.item).attr('class', 'ui-state-default edit');
initEditable();
}
});
});
See modified code here: http://jsfiddle.net/xvsMh/1/
Your events are correct, but as you realized, #draggable is the original item, not the cloned one. One way to get your cloned item would be to search for an item with identical classes in the sortable list. So instead of using:
$("#draggable").attr('class', 'edit');
you use:
$('#sortable .ui-draggable')
.removeClass('ui-state-highlight ui-draggable')
.addClass('ui-state-default edit');
Demo at JSFiddle

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

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

Categories

Resources