drag and drop using javascript and jquery

Question

I am trying to capture the coordinates of list items on their current position and also after they have been dragged and dropped to some place. I am able to capture the cooedinates before thr drag and drop. I am not able figure out what to do after the drag and drop. please help.

the html:

<ul class="sortable">
<li class="ui-state-default" id="third">3</li>
            <li class="ui-state-default" id="fourth">4</li>
            <li class="ui-state-default" id="fifth">5</li>
            <li class="ui-state-default" id="sixth">6</li>
            <li class="ui-state-default" id="seventh">7</li>
            <li class="ui-state-default" id="eighth">8</li>
            <li class="ui-state-default" id="ninth">9</li>
            <li class="ui-state-default" id="tenth">10</li>
            <li class="ui-state-default" id="eleventh">11</li>
</ul>

the jquery:

$(function () {
    $(".sortable").sortable();
    $(".sortable").disableSelection();
    //---------------------------------------------------------------------------------------------------------------------------//
    //rounded-corner || ui-state-default
    $('.rounded-corner').on('click', function(){
    var offset = $(this).offset();
    alert('top - ' + offset.top + "\nleft - " + offset.left);});
    //ONCLICK CLOSE
    /*$(".ui-state-default").click(function () {
        var tblId = $(this).attr("id");
       // alert(tblId);
       var ans = confirm("Are you sure you want to remove this table?");
       if(ans == true)
        $("#" + tblId).hide();
        //else exit();
    });*/
    //---------------------------------------------------------------------------------------------------------------------------//

    $(".glyphicon-remove").click(function () {
        var tblId = $(this).parent().attr("id");
       // alert(tblId);
       var ans = confirm("Are you sure you want to remove this table?");
        if(ans)
            $("#" + tblId).hide(500);
        //else exit();
    });

    $(document).bind("contextmenu", function(e) {
        var tblId,tbl, ans;
        tblId = $(this).parent().attr("id");
        tbl = $("#" + tblId);
        if (!(tbl.is(":visible"))) {
            // It's not showing
            ans = confirm("Are you sure you want to show this table?");
        }
        if(ans){
            $('.glyphicon-remove').parent().show(500);
        }
    return false;
    });

    });

kamesh · Accepted Answer · 2014-03-12 04:52:12Z

1

Use event.pageX and event.pageY to get current position. link

if(afterdragged)
{
  alert($( ".sortable" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY ));
}

answered Mar 12, 2014 at 4:52

kamesh

2,4343 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

drag and drop using javascript and jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related