JavaScript DHTML/Ajax Layer/Draggable List

Материал из Web эксперт
Перейти к: навигация, поиск

Drag and drop list item

   <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 Drag and drop functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   #thelist li { background: green; margin:5px; padding: 30px; }
   #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
 </style>

</head> <body>

script.aculo.us Drag and drop functional test file

Draggables/Droppables

  • Relatively here!
  • <input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one
  • one


<script type="text/javascript" language="javascript" charset="utf-8">
//  Sortable.create("thelist", {overlap: "horizontal", constraint: false});
Position.includeScrollOffsets = true;
Sortable.create("thelist2",{scroll:"scroll-container"});
</script>
</body>
</html>



      </source>
   
  



<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>






Drag and drop list items


   <source lang="html4strict">



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<TITLE>RelativeLayers : Available area example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">







<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, 10);" ONMOUSEUP="return layer2.stopScroll();">scroll up</A>

<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(10, 0);" ONMOUSEUP="return layer2.stopScroll();">scroll left</A>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(-10, 0);" ONMOUSEUP="return layer2.stopScroll();">scroll right</A>

<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, -10);" ONMOUSEUP="return layer2.stopScroll();">scroll down</A>












</BODY>
</HTML>



      </source>
   
  



<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a>






Yahoo! UI Library - Drag and Drop: a sortable list


   <source lang="html4strict">



 <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>

<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="./examples/dragdrop/js/DDList.js" ></script>
<script type="text/javascript">
YAHOO.example.DDApp = function() {



   return {
       init: function() {
           var i = 0;
           for (j=0;j < 20;++j) {
               new YAHOO.example.DDList("li" + j);
               new YAHOO.example.DDList("li" + (j + 20));
               new YAHOO.example.DDList("li" + (j + 40), "right");
           }
           new YAHOO.example.DDListBoundary("hidden1");
           new YAHOO.example.DDListBoundary("hidden2");
           new YAHOO.example.DDListBoundary("hidden3", "right");
           // dd11 = new YAHOO.example.DDList("li11");
           // dd11.addToGroup("right");
           // dd12 = new YAHOO.example.DDList("li12");
           // dd12.addToGroup("right");
           YAHOO.util.DDM.mode = 
                   document.getElementById("ddmode").selectedIndex;
       }
   };



} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
// YAHOO.util.DDM.useCache = false;

</script>
<body>



Drag and Drop - DDProxy


<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */



  1. yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}


/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */

</style>

<img id="ylogo" src="./examples/dragdrop/img/logo.gif" />














Examples


<script type="text/javascript">



   YAHOO.example.logApp = function() {
       return {
           init: function() {
               if (YAHOO.widget.Logger) {
                   var reader = new YAHOO.widget.LogReader( "logDiv", 
                           { newestOnTop: true, height: "400px" } );
                   reader._onClickPauseBtn(null, reader);
               }
           }
       };
   } (); 
   YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);



</script>
</h4>








  


   <form name="dragDropForm" action="javscript:;">


    

      
Sortable List

      

        This example extends
        DDProxy
        to implement a sortable list.  When a list item is dragged past the center
        of another list item, it is inserted before that item.
        The items in the first two columns can interact with items in the other
        column.  The items in the third column are defined as a separate group,
        so they can only interact with other items in the third column.
      


       Mode: 
       <select id="ddmode" onchange="YAHOO.util.DDM.mode = this.selectedIndex">
         <option value="0" selected>Point</point>
         <option value="1">Intersect</point>
       </select>




The logger is paused for performance reasons.  Click "Resume" to re-enable it.


    

    

    
    
    
        
  • Hidden
    • 
        
  • li 0
  • li 1
  • li 2
  • li 3
  • li 4
  • li 5
  • li 6
  • li 7
  • li 8
  • li 9
  • li 10
  • li 11
  • li 12
  • li 13
  • li 14
  • li 15
  • li 16
  • li 17
  • li 18
  • li 19
    •         
  • Hidden
    • 
    

    		
     

    
    
        
  • Hidden
    • 
        
  • li 20
  • li 21
  • li 22
  • li 23
  • li 24
  • li 25
  • li 26
  • li 27
  • li 28
  • li 29
  • li 30
  • li 31
  • li 32
  • li 33
  • li 34
  • li 35
  • li 36
  • li 37
  • li 38
  • li 39
    • 
        
  • Hidden
    • 
    

    		
     

    
    
        
  • Hidden
    • 
        
  • li 40
  • li 41
  • li 42
  • li 43
  • li 44
  • li 45
  • li 46
  • li 47
  • li 48
  • li 49
  • li 50
  • li 51
  • li 52
  • li 53
  • li 54
  • li 55
  • li 56
  • li 57
  • li 58
  • li 59
    •         
  • Hidden
    • 
    

    		
    

    

    


   </form>


  

      

        
      

    

  




 </body>



</html>


           



      </source>
   
  



<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>








					

						Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Draggable_List&oldid=1635»