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 Draggable 및 Droppable 사례

좋은 웹페이지 즐겨찾기
