jquery 드래그 div

*jquery 라이브러리 내 다운로드로 다운로드
=============================================================/감청 이벤트와 리셋
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
     <script type="text/javascript">
     //       

         $(function () {
             $("#dragsource").draggable({
                 create: function (event, ui) { $("#div1").html("   "); },
                 start: function (event, ui) { $("#div1").html("   "); },
                 drag: function (event, ui) { $("#div1").html("   "); },
                 stop: function (event, ui) { $("#div1").html("   "); },
                 revert:"invalid",//         
                 cursor:"move"//      
             }); //   DIV
             $("#droppalbe").droppable({
                 create: function (event, ui) { $("#div2").html("   "); },
                 activate: function (event, ui) { $("#div2").html("activeta"); }, //   div       div (   )
                 deactivate: function (event, ui) { $("#div2").html("deactivate"); }, //   div       div (    )
                 over: function (event, ui) { $("#div3").html("    "); },
                 out: function (event, ui) { $("#div3").html("    "); },
                 drop: function (event, ui) { $("#div3").html("      "); } // activate、deactivate   
             }); //  
         });
    </script>
</head>
<body>
        <div id="dragsource"  style="width:100px;height:100px;background:#123123">
        <p>  !</p>
        </div>

       <div id="droppalbe" style="width: 300px;height:300px;background-color:gray">
        <p>Drop here</p>
        </div>



        <div id="div1" style="border:1px solid #123123;width:100px;height:20px;">
        </div>
        <div id="div2" style="border:1px solid #123123;width:100px;height:20px;">
        </div>
        <div id="div3" style="border:1px solid #123123;width:100px;height:20px;">
        </div>
</body>
</html>

===========================================================/복사 드래그(helper)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //    

        $(function () {
            $("#resource").draggable({
                helper: "clone"
            });


            $("#targer").droppable({
                drop: function (event, ui) {//  div        
                    var div = $("#resource").clone(false); //  div
                    div.css({"top":ui.offset.top+"px","left":ui.offset.left+"px"});//    
                    $(this).append(div);//      div
                }
            });
        });


    </script>
</head>
<body>
    

    <div></div>


    <div style="border:1px solid #000;width:100px;height:300px;float:left;margin-right:10px;">
        <div id="resource" style="width:50px;height:50px;background:#123123;margin:10px;cursor:pointer;position:absolute"></div>
    </div>
    <div style="border:1px solid #000;width:300px;height:300px;float:left" id="targer"></div>
</body>
</html>

==========================================================/드래그 방향 제어(axis)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
        //      
            $("#resouce").draggable({
                //axis: "x"//  x   
                axis: "y"//  y   
            });
        });
    </script>
</head>
<body>
    

    <div style="width:100px;height:100px;background:#123123" id="resouce"></div>
</body>
</html>

==========================================================/드래그 범위 제어(containment)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //      
        $(function () {
            $("#resource").draggable({
            //containment: $("#targer")          
            // containment:"parent"              
            containment:[0,0,300,200]     //     
            });
        });
    </script>
</head>
<body>
    
   <div style="border:1px solid #000;width:300px;height:300px" id="targer">
   <div id="resource" style="width:50px;height:50px;background:#123123;margin:10px;cursor:pointer;"></
   </div>
   div>
</body>
</html>

===========================================================/드래그 흡착(snap,grid)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript">
    $(function () {
        //    
        $("#source1").draggable({
            snap:true
        });

        $("#source2").draggable({
            snap: "#targer"
        });

        $("#source3").draggable({
            grid: [50,50]
        });

    });
</script>
</head>
<body>

<div id="targer" style="width:100px;height:100px;border:1px solid #000">  </div>
<br /><br /><br />
<div id="source1" style="width:50px;height:50px;border:1px solid #000;cursor:pointer">      div</div>
<br /><br /><br />
<div id="source2" style="width:50px;height:50px;border:1px solid #000;cursor:pointer">     </div>
<br /><br /><br />
<div id="source3" style="width:50px;height:50px;border:1px solid #000;cursor:pointer">     </div>

  

</body>
</html>

==========================================================/div 핸들을 드래그(handle)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //  div  
            $("#resource").draggable({
                handle:$(".p")
            });
        });
    </script>
</head>
<body>
    

    <div id="resource" style="width:100px;height:100px;background:yellow">
    <p class="p" style="width:100px;height:30px;background:#123123;cursor:pointer" ></p>
    </div>
</body>
</html>

좋은 웹페이지 즐겨찾기