Question

我一直在试图弄清楚如何使用jquery.ui draggable控件的'create'事件。抛出警报就像一个简单的例子不起作用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag "create event" test</title>

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>

<style type="text/css" media="all">
#pai { width:1000px; border:1px solid #ccc; position:relative; }
#filho { width:100px; border:1px solid #c00; position:relative; top:0; left:0; }
</style>

<script type="text/javascript">

$(document).ready(function(){                           

    $("#filho").draggable();

    $("#filho").bind("dragcreate", function(event, ui) {
        alert("VAAAAAAAAAAAI!");
    });
});
</script>

</head>

<body>
<div id="pai">
    <div id="filho">
        teste de drag
    </div>      
</div>
</body>
</html>

我已经进行了搜索和测试，但我似乎无法让这个简单的例子起作用。如jquery draggable's web page所述，控件确实有一个“创建”方法，可以通过在初始化期间将其与稍后绑定它相关联来调用。我试过这两种方法都没有成功。

我正在使用jquery v1.4.2和UI v1.8.1。

感谢任何帮助。

Answer 1

在我看来应该是：

$(document).ready(function(){                              

    $("#filho").bind("dragcreate", function(event, ui) {
        alert("VAAAAAAAAAAAI!");
    });
    $("#filho").draggable();
});

Firt bind事件，然后创建draggable。

JQuery UI版本更新

这个无效，JQueryUI版本低于1.8.7。因此，您还需要将JQueryUI版本升级到更新版本。正如答案评论中Frédéric Hamidi所述。

Answer 2

为什么不在draggable intitializer中添加你的函数：

<script type="text/javascript">

$(document).ready(function(){                           

    $("#filho").draggable({
create: onCreate
});

function onCreate(event, ui){
alert("VAAAAAAAAAAAI!");
}


});
</script>

这应该提供您需要的相同结果

Answer 3

在我看来，唯一缺少的是对所需JS的正确引用。 =）

添加：

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

而不是：

<script src="js/jquery.js"></script>

<script src="js/jquery-ui.js"></script>

我拿了你的代码并切换了JS引用。它奏效了！

我希望它可以帮到你。

提升jquery draggable的“创造”事件

3 个答案:

JQuery UI版本更新