CODEWITHSUNDEEP
javascriptjqueryhtml
myNameCoad
myNameCoad

Reputation: 2663

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

here's the picture's concept.

enter image description here

Suppose that cell's ID are the combination of row and column number.

Upvotes: 2

Views: 2838

Answers (4)

Deepak Biswal
Deepak Biswal

Reputation: 4320

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'));
    }
  });
  });

Upvotes: 1

Almir M.
Almir M.

Reputation: 76

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!" );
    }
  });
  });

Upvotes: 1

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

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/

Upvotes: 0

STT
STT

Reputation: 668

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.

Upvotes: 0

Related Questions