可拖动的黑色圆圈图标不应拖动到灰色圆圈之外使用 jquery ui draggable

问题描述

我为此使用了 jQuery UI Draggable。您可以在此 codepen 链接中查看我的代码。此黑色圆圈图标不应移出灰色圆圈。

<div id="groundarea">
    <div class="player player1">
    </div>
    <div class="player player2">
    </div>
</div>

$(document).ready(function(){
    $(".player").draggable({
        containment: "#groundarea",cursor: "grabbing"
    });
    $(".player" ).on( "dragstop",function( event,ui ) {
        var playerId = $(this).data('playerId');
        var leftPercent = ( 100 * parseFloat(ui.position.left / parseFloat($('#groundarea').width())) );
        var topPercent = ( 100 * parseFloat(ui.position.top / parseFloat($('#groundarea').height())) );
        $.ajax({
            type: "POST",url: "./update_position.PHP",cache: false,data: {'playerId': playerId,'leftPercent': leftPercent,'topPercent': topPercent,'left': ui.position.left,'top': ui.position.top},dataType: 'json',success: function (result) {
                console.log(result);
            },error: function (xhr,ajaxOptions,thrownError) {
                console.log(xhr);
            }
        });
    });
});

这是代码网址 https://codepen.io/jaimindarji07/pen/MWmKXdp

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）