반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

IT.FARMER

Drag & Drop (드레그 앤 드롭) 본문

JavaScript/scriptaculous

Drag & Drop (드레그 앤 드롭)

아이티.파머 2010. 8. 25. 14:52
반응형

<!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" xml:lang="en" lang="en">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/effects.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/dragdrop.js"></script>
  <style type="text/css">
   body {
    background-color:#1b2d3d;
    color:#fff;
    font-size:12px;
   }
   div.div1{
    width:210px;
    min-height:330px;
    background-color:#324d65;
    margin-left:50px;
    float:left;
    color:#FFFFFF;
   }

   div.div2{
    width:200px;
    height:100px;
    margin-top:10px;
   }

   div.div2 li.li1{
    width:200px;
    background-color:#98b125;
    min-height:20px;
    color:#000;
    cursor:move;

   }
   div.div2 li.li2{
    width:200px;
    background-color:#FFFFFF;
    min-height:50px;
    color:#000;
   }

   .dummyDestinationStyle { border:3px dashed #C0C0C0; margin-top:12px; position:absolute; }

  </style>
  <script type="text/javascript">
   var dragoption_ = function(){
    
    var dragoption = {
     tag:'div', 
     handle: 'handler',
 //    only: 'widjet',
 //    overlap: 'vertical',
     constraint: false,
     containment:['list1', 'list2'],
     dropOnEmpty: true,
     delay: 300,
     scroll: window,
     onChange: function(elem) {//마우스로 이동하는 중간중간 계속 이동함.
      if ($("dummyDestinationDiv")) {
       $("dummyDestinationDiv").remove();
      }
      elem.insert({before:'<div id="dummyDestinationDiv" class="dummyDestinationStyle" style="width:'+(elem.getWidth()-7)+'px; //height:'+(elem.getHeight()-15)+'px;"></div>'});
     },
     onUpdate: function(tab) {
      if ($("dummyDestinationDiv")) {
       $("dummyDestinationDiv").remove();
      }
      
     }
     
    }
    return dragoption;
   }

   document.observe('dom:loaded', function() {
    Sortable.create('list1', dragoption_());
    Sortable.create('list2', dragoption_());
   });
  </script>
</head>
 <body>
  <div id="list1" class="div1">
   <div id="handler" class="div2">
    <li class="li1">Content 1</li>
    <li class="li2">첫번째 박스 이동합니다.</li>
   </div>
   <div id="handler" class="div2">
    <li class="li1">Content 2</li>
    <li class="li2">두번째 박스 이동합니다.</li>
   </div>
   <div id="handler" class="div2">
    <li class="li1">Content 3</li>
    <li class="li2">세번째 박스 이동합니다.</li>
   </div>
  </div>
  <div id="list2" class="div1">
   <div id="handler" class="div2">
    <li  class="li1">Content 4</li>
    <li  class="li2">네번째 박스 이동합니다.</li>
   </div>
   <div id="handler" class="div2">
    <li class="li1">Content 5</li>
    <li class="li2">다섯번째 박스 이동합니다.</li>
   </div>
   <div id="handler" class="div2">
    <li class="li1">Content 6</li>
    <li class="li2">6번째 박스 이동합니다.</li>
   </div>
  </div>
 </body>
</html>



  • Content 1
  • 첫번째 박스 이동합니다.
  • Content 2
  • 두번째 박스 이동합니다.
  • Content 3
  • 세번째 박스 이동합니다.
  • Content 4
  • 네번째 박스 이동합니다.
  • Content 5
  • 다섯번째 박스 이동합니다.
  • Content 6
  • 6번째 박스 이동합니다.
    • li테그로 만들었더니 점이 찍히네, 그냥 DIV로 할껄 그랬나보다,
    반응형
    저작자표시

    'JavaScript > scriptaculous' 카테고리의 다른 글

    Scriptaculous Sortable.create  (0) 2010.08.25
    'JavaScript/scriptaculous' Related Articles more