Question

我试图捕捉列表项目的当前位置的坐标，以及它们被拖放到某个地方之后。我能够在拖曳之前抓住咕咕声。拖拉后我无法弄清楚要做什么。请帮忙。

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

使用javascript和jquery拖放

1 个答案: