使用javascript和jquery拖放

drag and drop using javascript and jquery

本文关键字:拖放 jquery javascript 使用      更新时间:2023-09-26

我试图捕获列表项在其当前位置上的坐标,并且在它们被拖放到某个地方之后。我能够在拖放之前捕获坐标。我不知道拖放后要做什么。请帮助。

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

使用事件。pageX和事件。pageY获取当前位置。链接

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