Jquery Drag-drop (getting Element Being Dropped Into)

Question

I am trying to detect which cell an object is being dropped into.

Solution 1:

I couldn't get dropping to work inside of cells - I even tried putting divs inside each of the cells. If you drop the draggable div into the droppable div this code will work:

$(".draggable").draggable();
$(".droppable").droppable({
    drop: function(event, ui) {
        $(this).html('Dropped!');
    }
});

<table><tr><tdclass="weekday">Sun</td><tdclass="weekday">Mon</td><tdclass="weekday">Tue</td><tdclass="weekday">Wed</td><tdclass="weekday">Thu</td><tdclass="weekday">Fri</td><tdclass="weekday">Sat</td></tr><tr><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td><td><divclass="droppable">empty</div></td></tr></table><divclass="droppable">drop in me!</div><divclass="draggable">Drag Me</div>

Solution 2:

It'd be a lot easier if you made the weekday cells droppable — then you don't have to calculate the index of the current dropped cell and look up the contents of the day-of-the-week cell.

Also, I think you need to give the cells a width and height in the CSS.

This seems to do what you want, courtesy of the jQuery UI docs:

<styletype="text/css">td {
        width: 4em;
        height: 4em;
        margin: 3px;
    }
    td.weekday {
        background: #fcc;
    }
    td.droppable {
        background: #ccf;
    }
    div.draggable {
        background: #cfc;
        padding: 1em;
        width: 10em;
    }
</style><table><tr><tdclass="weekday">Sun</td><tdclass="weekday">Mon</td><tdclass="weekday">Tue</td><tdclass="weekday">Wed</td><tdclass="weekday">Thu</td><tdclass="weekday">Fri</td><tdclass="weekday">Sat</td></tr></table><divclass="draggable">Drag Me</div><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script><scripttype="text/javascript">
    $(".draggable").draggable();
    $(".weekday").droppable({
        drop: function() {
            alert($(this).text());
        }
    });
</script>

Learn Html5

Jquery Drag-drop (getting Element Being Dropped Into)

Solution 1:

Solution 2:

Post a Comment for "Jquery Drag-drop (getting Element Being Dropped Into)"