Question

自我解释，我应该能够移动这个元素，因为它是可拖动的，但是我无法移动它，我做错了什么？

我似乎无法解决任何错误，因为代码非常简单

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

$('#dragThis').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        }
    });

#dragThis {
    position:relative;
    overflow:visible;
    border:1px dashed black;
    border-radius:50%;
    width:150px;
    height:150px;
    background-repeat:no-repeat;
    background-position: center; 
    background-image: url('https://image.flaticon.com/icons/png/128/148/148836.png');
}

<div id="dragThis">
<ul style="position:absolute; left:-25px; top:-25px;">
        <li id="posX"></li>
        <li id="posY"></li>
        <li id="finalX"></li>
        <li id="finalY"></li>
    </ul>
<div style="position:absolute; top:50%; left:50%; width:10px; height:10px; background-color:grey; z-index:1000; border-radius:50%; border:1px solid black; transform: translate(-50%, -50%);">

</div>

</div>

Answer 1

您缺少必要的依赖项。

您还必须从jQueryUI添加jquery-ui.css和jquery-ui.js个文件。在jQueryUI站点上查看此draggable demo。

工作代码，

$('#dragThis').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        }
    });

#dragThis {
    position:relative;
    overflow:visible;
    border:1px dashed black;
    border-radius:50%;
    width:150px;
    height:150px;
    background-repeat:no-repeat;
    background-position: center; 
    background-image: url('https://image.flaticon.com/icons/png/128/148/148836.png');
}

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dragThis">
<ul style="position:absolute; left:-25px; top:-25px;">
        <li id="posX"></li>
        <li id="posY"></li>
        <li id="finalX"></li>
        <li id="finalY"></li>
    </ul>
<div style="position:absolute; top:50%; left:50%; width:10px; height:10px; background-color:grey; z-index:1000; border-radius:50%; border:1px solid black; transform: translate(-50%, -50%);">

</div>

</div>

Answer 2

记得导入jQueryUI。 https://code.jquery.com/ui/

.draggable是jQueryUI的一部分。

在检查firebug中的代码或类似时，错误 TypeError: "draggable" is not a function有帮助。检查你的调试：）

为什么我的div元素不可拖动？

2 个答案: