您的位置：首页 > Web前端 > JQuery

jquery UI Draggable和Droppable 案例

2014-03-06 14:09 561 查看

<html>
<head><title>draggable</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="container" style="background-color:#ccc;width:500px;height:300px;">
<div class="alert alert-dismissable alert-info dragsource">
<p>aaaa</p>
</div>
<div class="alert alert-dismissable alert-info dragsource">
<p>bbbb</p>
</div>
<div class="alert alert-dismissable alert-info dragsource">
<p>cccc</p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$(".dragsource").draggable({
revert: "invalid",
cursor: "move", //移动时鼠标的位置
cursorAt: { top: 56, left: 56 },
snap: ".dragsource",//吸附到其他可托动元素
containment: "parent",//限制拖放范围,亦可以用四元数组
//axis: "y",//只可以沿着Y轴拖动
start: function (event, ui) {
//$(this).find("p").html("Starting");
},
stop: function (event, ui) {
// $(this).find("p").html("stop");
}
});
$("#container").droppable({
//activeClass: "ui-state-hover",
//hoverClass: "ui-state-active",//拖动时的样式
activate: function (event, ui) {
// $(this).find("p").html( "Drop here !" );
},
over: function (event, ui) {
// $( this ).find( "p" ).html( "Oh, Yeah!" );

},
out: function (event, ui) {
// $( this ).find( "p" ).html( "Don't leave me!" );

},
drop: function (event, ui) {
//拖放
// $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
}
});
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航