如何制作自定义可拖动脚本

user3072635 发表于 Dev

用户名

我正在尝试使用Javascript使对象可拖动。幸运的是，我设法建立了自己想要的东西。每次运行代码时，我都可以将对象拖拽大约8/11次，然后浏览器开始冻结。我尝试使用chrome，Firefox和safari，它们在拾取对象并将其放置约10次后都冻结了。我去了jquery网站，我确保所有功能都以正确的方式使用。我找不到正在发生的任何原因。有人可以帮忙吗？

<html> 
    <head>
        <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
        <style>
            .draggable {
                width:400px;
                height:30px;
                background-color:black;
                position:absolute;
                top:10px;
                left:1px;
            }
        </style>
        <script type='text/javascript'>
            function moveobject() {
                $(document).mousemove(function(event) {
                    $("#draggable1").css("top", event.pageY - plustop);
                    $("#draggable1").css("left", event.pageX - plusleft);
                });
                $("#draggable1").click(function() {
                    $(document).unbind();
                    $("#draggable1").click(moveobject);
                });
            }
            $(document).ready(function() {
                $("#draggable1").click(function() {
                    $("#draggable1").mousemove(function(e) {
                        var top = $("#draggable1").css("top");
                        var left = $("#draggable1").css("left");
                        top = top.replace("px", "");
                        left = left.replace("px", "");
                        plusleft = (e.pageX - left)
                        plustop = (e.pageY - top)
                        $(this).unbind("mousemove");
                    });
                    moveobject();
                });
            });
        </script>
    </head>
    <body>
        <div class='draggable' id='draggable1'></div>
    </body>
</html>

哈代

尝试使用http://jqueryui.com/draggable/

易于使用。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
        #draggable { width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script>
        $(function() {
            $( "#draggable" ).draggable();
        });
    </script>
</head>
<body>
    <div id="draggable" class="ui-widget-content">
        <p>Drag me around</p>
    </div>
</body>
</html>