반응형
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

Scriptaculous Sortable.create 본문

JavaScript/scriptaculous

Scriptaculous Sortable.create

아이티.파머 2010. 8. 25. 15:27
반응형
<!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>
  <script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
  <style type="text/css">
  
  div .li{
    width:300px;
    min-height:20px;
    background-color:#cbff75;
    margin-left:50px;
    //float:left;
    color:;
    cursor:move;
   }
  div .span{
    width:300px;
    min-height:20px;
    background-color:#64aaff;
    margin-left:50px;
    //float:left;
    color:;
    cursor:move;
   }
  </style>

</head>
  
<body>

 <div id="list">
  <span class="span">SPAN [SPANTAG]</span>
  <li class="li">works[LI TAG]</li>
  <li class="li">this [LI TAG] </li>
  <li class="li">Yay   [LI TAG]</li>
  <li class="li">now[LI TAG]</li>
 </div>

 <script type="text/javascript">
  Sortable.create("list");
 </script>
</body>
</html>
<!-- http://wiki.github.com/madrobby/scriptaculous/sortable-create -->



* Sample
SASPAN [SPANTAG]
  • works[LI TAG]
  • this [LI TAG]
  • Yay [LI TAG]
  • now[LI TAG]


    • * 마우스를 화면에 두고 꾹눌러서 이동해보삼

    SPAN 테그는 왜 안먹히는거지?
    DIV 말고 UL 에 id 값 먹여서 해도 되더이다.
    반응형
    저작자표시

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

    Drag & Drop (드레그 앤 드롭)  (0) 2010.08.25
    'JavaScript/scriptaculous' Related Articles more