jquery UI Draggable和Droppable 案例

  

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

  

你可能感兴趣的:(jQuery UI)