jQuery什么是.drag?拖动多个元素同时不起作用

时间:2013-04-18 20:29:27

标签: jquery jquery-ui-draggable

我正在看这个小提琴的例子:

http://jsfiddle.net/ubEqb/

您可以看到同时拖动多个元素。在这个例子中,它有“$('。drag')。drag(”init“,function(ev,dd)”

什么是'.drag'部分?我是jquery的新手并且认为它是'可拖动的',我找不到'.drag'实际做任何事情的任何官方文档。

如果我将这个小提琴中的文本复制到我的html中,它就不起作用了。这就是我得到的:

<!DOCTYPE html>
<head>
<style>
.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://dl.dropboxusercontent.com/u/286533/jquery-1.9.1.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/286533/jquery-ui.js"></script>
</head>
<body>
 <p>Click to select multiple boxes, and drag them around the screen.</p>
    <div id="test" class="drag" style="left:20px;">Square 1</div>
    <div class="drag" style="left:100px;"></div>
    <div class="drag" style="left:180px;"></div>
</body>
<script>    
$('.drag').drag("init", function(ev, dd) {
    if (this.id == "test") {
        return $(".drag").addClass("selected");
    }
}).drag(function(ev, dd) {
    if (ev.target.id == "test") {
        $(this).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    }
});
</script>
</html>

1 个答案:

答案 0 :(得分:0)

jQuery中没有“拖动”方法或jQuery UI中没有“拖动”小部件。你指的“draggable”确实是jQuery UI的一部分。你可以阅读它here

你在jsfiddle中看到的是jQuery和其他一些第三方库。如果您查看左侧的“外部资源”面板,您会看到对某个jquery.event.drag-2.2.js的引用,这实际上是定义jsfiddle中“drag”方法的内容。