JavaScript DHTML/Scriptaculous/Sortable

Материал из Web эксперт
Версия от 10:26, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

drag and drop to sort

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 <head>
   <title>Draggable demo</title>
   
   <style type="text/css" media="screen">
     body {
       font-family: "Trebuchet MS", sans-serif;
     }
   
     #container {
       width: 200px;
       list-style-type: none;
       margin-left: 0;
       padding-left: 0;
     }
     
       #container li, .foo {
         background-color: #f9f9f9;
         border: 1px solid #ccc;
         padding: 3px 5px;
         padding-left: 0;
         margin: 10px 0;
       }
       
       #container li .handle {
         background-color: #090;
         color: #fff;
         font-weight: bold;
         padding: 3px;
       }
       
     #container, #drop_zone {
       width: 200px;
       height: 300px;
       list-style-type: none;
       margin-left: 0;
       margin-right: 20px;
       float: left;
       padding: 0;
       border: 2px dashed #999;
     }        
       
   </style>
   
   <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript" charset="utf-8"></script>
   <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript" charset="utf-8"></script>
   
   <script type="text/javascript">
   document.observe("dom:loaded", function() {
     Sortable.create("container", { scroll: window });
   });
   </script>
 </head>
 <body>
   
  • Lorem
  • Ipsum
  • Dolor
  • Sit
  • Amet
 </body>

</html>

 </source>
   
  


Horizontally Sortable

   <source lang="html4strict">

<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {

 Sortable.create("myList", { constraint: "horizontal", overlap: "horizontal" });

}); </script> <style>

  1. myList {
 list-style-type: none;
 padding: 0;

}

  1. myList li {
 float: left; cursor: move;
 margin-left: 1em; padding: 0.2em; width: 10em;
 border: 0.05em solid gray; background: #ddd;
 text-align: center;

}

</style> </head> <body>

  1. A
  2. B
  3. C
  4. D
  5. E

</body> </html>

 </source>
   
  


Sortabled list with handlers

   <source lang="html4strict">


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

 <title>script.aculo.us sortable functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <link rel="stylesheet" href="../test.css" type="text/css" />
 <style type="text/css" media="screen">
 ul.sortablelist {
   list-style-image:none;
   list-style-type:none;
   margin-top:5px;
   margin:0px;
   padding:0px;
 }
 ul.sortabledemo li {
   padding:0px;
   margin:0px;
 }
 span.handle {
   background-color: #E8A400;
   color:white;
   cursor: move;
 }
 li.green {
   background-color: #ECF3E1;
   border:1px solid #C5DEA1;
   cursor: move;
 }
 li.orange {
   border:1px solid #E8A400;
   background-color: #FFF4D8;
 }
 </style>

</head> <body>

script.aculo.us: Two floating sortables with containment and dropOnEmpty

This is the first list

  • Item 1 from first list.
  • Item 2 from first list.
  • Item 3 from first list.

And now the second list

  • DRAG HERE Item 1 from second list.
  • DRAG HERE Item 2 from second list.
  • DRAG HERE Item 3 from second list.



<script type="text/javascript">

  Sortable.create("firstlist",
    {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false,
     onChange:function(){$("firstlist_debug").innerHTML = Sortable.serialize("firstlist") }});
  Sortable.create("secondlist",
    {dropOnEmpty:true,handle:"handle",containment:["firstlist","secondlist"],constraint:false,
    onChange:function(){$("secondlist_debug").innerHTML = Sortable.serialize("secondlist") }});

</script>

</body>
</html>

  
 </source>
   
  


Sortable is Not just for lists

   <source lang="html4strict">

<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {

 Sortable.create("chapter", { tag: "p", only: ["orderable", "moveIt"] });

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

This stays on top.

Sortable.

And this too!

sortable.

This stays at bottom.

</body> </html>

 </source>
   
  


Sortable list updated event

   <source lang="html4strict">


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

 <title>script.aculo.us sortable functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <link rel="stylesheet" href="../test.css" type="text/css" />

</head> <body>

<script type="text/javascript" language="javascript" charset="utf-8">

 var new_ul_id = "new_id_123";
 var ul = document.createElement("ul");
 var ul_id = document.createAttribute("id");
 ul_id.nodeValue = new_ul_id;
 ul.setAttributeNode(ul_id);
 
 var li = document.createElement("li");
 li.setAttribute("id", "test_1");
 li.appendChild(document.createTextNode("blah1"));
 ul.appendChild(li);
 
 var li2 = document.createElement("li");
 li2.setAttribute("id", "test_2");
 li2.appendChild(document.createTextNode("blah2"));
 ul.appendChild(li2);
 
 $("container_div").appendChild(ul);
 
 Sortable.create(new_ul_id, { onUpdate: function() { alert(Sortable.serialize("new_id_123")); } });

</script> </body> </html>

 </source>
   
  


Sortable onChange event and onUpdate event

   <source lang="html4strict">

<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {

 var changeEffect;
 Sortable.create("myList", {
   onChange: function(item) {
     var list = Sortable.options(item).element; 
     alert(Sortable.serialize(list).escapeHTML());
     if (changeEffect) changeEffect.cancel();
     changeEffect = new Effect.Highlight("changeNotif", { restorecolor: "transparent" });
   },
   onUpdate: function(list) {
     alert(Sortable.serialize(list).escapeHTML());
   }
 });

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

  1. A
  2. B
  3. C
  4. D
  5. E

</body> </html>

 </source>
   
  


Sortable two-lists

   <source lang="html4strict">


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

 <title>script.aculo.us sortable functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <link rel="stylesheet" href="../test.css" type="text/css" />
 <style type="text/css" media="screen">
   ul { height: 100px; border:1px dotted #888; }
 </style>

</head> <body>

script.aculo.us Sortable two-lists w/ dropOnEmpty functional test file

  • Hey there! I"m item#1/1
  • Hey there! I"m item#1/2
  • Hey there! I"m item#1/3

<script type="text/javascript" language="javascript" charset="utf-8">

 Sortable.create("thelist1",{containment:["thelist1","thelist2"], dropOnEmpty:true});
 Sortable.create("thelist2",{containment:["thelist1","thelist2"], dropOnEmpty:true});

</script> <a href="#" onclick="alert(Sortable.serialize("thelist1"));return false;">Serialize sortable1</a> <a href="#" onclick="alert(Sortable.serialize("thelist2"));return false;">Serialize sortable2</a>

</body> </html>

 </source>
   
  


Sortable with ghosting effects

   <source lang="html4strict">


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

 <title>script.aculo.us Sortable ghosting functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <link rel="stylesheet" href="../test.css" type="text/css" />
 <style>
   ul.testlist { 
     list-style-type:none;
     margin:0;
     padding:0;
   }
   ul.testlist li {
     width:200px;
     font:12px Verdana;
     padding:4px;
     cursor:move;
   }
   ul.testlist li.over {
     background-color:#fcb;
   }
   ul.testlist li img {
     float:left;
     margin-right:8px;
   }
   div.dropmarker {
     height:6px;
     width:200px;
     background: url(dropmarker.png) left top;
     margin-top:-3px;
     margin-left:-5px;
     z-index:1000;
     overflow: hidden;
   }
   #testlist4 li {
     float:left;
   }
 </style>

</head> <body>

script.aculo.us Sortable ghosting functional test file

Ghosting

  • <img src="icon.png" alt=""/> Lorem ipsum dolor
  • <img src="icon.png" alt=""/> sit amet
  • <img src="icon.png" alt=""/> consectetur adipisicing
  • <img src="icon.png" alt=""/> elit
  • <img src="icon.png" alt=""/> sed do eiusmod
  • <img src="icon.png" alt=""/> tempor incididunt
  • <img src="icon.png" alt=""/> ut labore et dolore
  • <img src="icon.png" alt=""/> magna aliqua

(waiting for onChange)

<script type="text/javascript" language="javascript" charset="utf-8">

 Sortable.create("testlist",{ghosting:true,constraint:false,hoverclass:"over",
   onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
   onChange:function(element){$("testlist_serialize").innerHTML = Sortable.serialize(element.parentNode)}
 });

</script>

No ghosting

  • <img src="icon.png" alt=""/> Lorem ipsum dolor
  • <img src="icon.png" alt=""/> sit amet
  • <img src="icon.png" alt=""/> consectetur adipisicing
  • <img src="icon.png" alt=""/> elit
  • <img src="icon.png" alt=""/> sed do eiusmod
  • <img src="icon.png" alt=""/> tempor incididunt
  • <img src="icon.png" alt=""/> ut labore et dolore
  • <img src="icon.png" alt=""/> magna aliqua

(waiting for onChange)

<script type="text/javascript" language="javascript" charset="utf-8">

 Sortable.create("testlist2",{ghosting:false,constraint:false,hoverclass:"over",
   onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
   onChange:function(element){$("testlist2_serialize").innerHTML = Sortable.serialize(element.parentNode)}
 });

</script>

Ghosting (inside position:relative container)

  • <img src="icon.png" alt=""/> Lorem ipsum dolor
  • <img src="icon.png" alt=""/> sit amet
  • <img src="icon.png" alt=""/> consectetur adipisicing
  • <img src="icon.png" alt=""/> elit
  • <img src="icon.png" alt=""/> sed do eiusmod
  • <img src="icon.png" alt=""/> tempor incididunt
  • <img src="icon.png" alt=""/> ut labore et dolore
  • <img src="icon.png" alt=""/> magna aliqua

(waiting for onChange)

<script type="text/javascript" language="javascript" charset="utf-8">

 Sortable.create("testlist3",{ghosting:true,constraint:false,
   onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
   onChange:function(element){$("testlist3_serialize").innerHTML = Sortable.serialize(element.parentNode)}
 });

</script>

Ghosting (inside position:relative container)

  • <img src="icon.png" alt=""/> Lorem ipsum dolor
  • <img src="icon.png" alt=""/> sit amet
  • <img src="icon.png" alt=""/> consectetur adipisicing
  • <img src="icon.png" alt=""/> elit
  • <img src="icon.png" alt=""/> sed do eiusmod
  • <img src="icon.png" alt=""/> tempor incididunt
  • <img src="icon.png" alt=""/> ut labore et dolore
  • <img src="icon.png" alt=""/> magna aliqua

(waiting for onChange)

<script type="text/javascript" language="javascript" charset="utf-8">

 Sortable.create("testlist4",{overlap:"horizontal",ghosting:true,constraint:false,
   onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
   onChange:function(element){$("testlist4_serialize").innerHTML = Sortable.serialize(element.parentNode)}
 });

</script>

</body> </html>

 </source>
   
  


Sort and reorder the ordered list

   <source lang="html4strict">

<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {

 Sortable.create("guys");

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

  1. A
  2. B
  3. C
  4. D
  5. E
</body>

</html>

 </source>
   
  


Two sortable groups

   <source lang="html4strict">

<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {

 var options = {
     constraint: false, containment: ["myList", "myList2"],
     dropOnEmpty: true, onUpdate: function(list) {
       var methodStart = list.down("li") ? "remove" : "add";
       list[methodStart + "ClassName"]("empty");
     }
 };
 Sortable.create("myList", options);
 Sortable.create("myList2", options);

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

  • A
  • B
  • C
  • D
  • E
  • F

</body> </html>

 </source>