jquery UI Draggable和Droppable 案例

浏览数：25 / 时间：2015年06月09日

<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>