使用 javascript 和 jquery 拖放

Question

我正在尝试捕获列表项在其当前位置以及在它们被拖放到某个位置之后的坐标。 我能够在拖放之前捕获 cooedinates。我无法弄清楚拖放后要做什么。请帮忙。

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>

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

    }); 

Answer 1

使用 event.pageX 和 event.pageY 获取当前位置。 link

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