摘要:[html] <html xmlns="https://www.w3.org/1999/xhtml"><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>jQuery Dynamic Drag'n Drop</title>  <script type="text/javascript" src="https://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js"></script><style type="text/css"></style>  <script type="text/javascript" src="https://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-ui-1.7.1.custom.min.js"></script>        <style>  body {      font-family: Arial, Helvetica, sans-serif;      font-size: 16px;      margin-top: 10px;  }    ul {      margin: 0;  }    #contentWrap {      width: 700px;      margin: 0 auto;      height: auto;      overflow: hidden;  }    #contentTop {      width: 600px;      padding: 10px;      margin-left: 30px;  }    #contentLeft {      float: left;      width: 400px;  }    #contentLeft li {      list-style: none;      margin: 0 0 4px 0;      padding: 10px;      background-color:#00CCCC;      border: #CCCCCC solid 1px;      color:#fff;  }              #contentRight {      float: right;      width: 260px;      padding:10px;      background-color:#336600;      color:#FFFFFF;  }    </style>      <script type="text/javascript">  $(document).ready(function(){                                    $(function() {          $("#contentLeft ul").sortable({ opacity: 0.5, cursor: 'move', update: function() {              var id="";              $("ul.ui-sortable li").each(function(){                  id+=$(this).attr("id")+"<br/>";              })              $("#contentRight").html(id);          }                                           });      });    });   </script>    </head>  <body style="cursor: auto;">        <p id="contentWrap">                  <p id="contentLeft">              <ul class="ui-sortable">                  <li id="recordsArray_3" style="opacity: 1; z-index: 0;" class="">3. Returned array can be found at the right</li>                  <li id="recordsArray_2">2. Dragging changes the opacity of the item</li>                  <li id="recordsArray_1" style="opacity: 1; z-index: 0;" class="">1. Once dropped, an Ajax query is activated</li>                  <li id="recordsArray_4" style="opacity: 1; z-index: 0;" class="">4. It is very very easy</li>                  <li id="recordsArray_5" style="opacity: 1; z-index: 0;" class="">5. It is very very easy</li>                  <li id="recordsArray_6" style="opacity: 1; z-index: 0;" class="">6. It is very very easy</li>                  <li id="recordsArray_7" style="opacity: 1; z-index: 0;" class="">7. It is very very easy</li>              </ul>          </p>                    <p id="contentRight"></p>            </p>        </body></html> 

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

[html]
<html xmlns="https://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery Dynamic Drag'n Drop</title> 
<script type="text/javascript" src="https://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js"></script><style type="text/css"></style> 
<script type="text/javascript" src="https://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-ui-1.7.1.custom.min.js"></script> 
 
 
 
<style> 
body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    margin-top: 10px; 

 
ul { 
    margin: 0; 

 
#contentWrap { 
    width: 700px; 
    margin: 0 auto; 
    height: auto; 
    overflow: hidden; 

 
#contentTop { 
    width: 600px; 
    padding: 10px; 
    margin-left: 30px; 

 
#contentLeft { 
    float: left; 
    width: 400px; 

 
#contentLeft li { 
    list-style: none; 
    margin: 0 0 4px 0; 
    padding: 10px; 
    background-color:#00CCCC; 
    border: #CCCCCC solid 1px; 
    color:#fff; 

 
 
     
 
#contentRight { 
    float: right; 
    width: 260px; 
    padding:10px; 
    background-color:#336600; 
    color:#FFFFFF; 

 
</style> 
 
 
<script type="text/javascript"> 
$(document).ready(function(){  
                            
    $(function() { 
        $("#contentLeft ul").sortable({ opacity: 0.5, cursor: 'move', update: function() { 
            var id=""; 
            $("ul.ui-sortable li").each(function(){ 
                id+=$(this).attr("id")+"<br/>"; 
            }) 
            $("#contentRight").html(id); 
        }                                  
        }); 
    }); 
 
});  
</script> 
 
</head> 
<body style="cursor: auto;"> 
 
    <p id="contentWrap"> 
 
     
        <p id="contentLeft"> 
            <ul class="ui-sortable"> 
                <li id="recordsArray_3" style="opacity: 1; z-index: 0;" class="">3. Returned array can be found at the right</li> 
                <li id="recordsArray_2">2. Dragging changes the opacity of the item</li> 
                <li id="recordsArray_1" style="opacity: 1; z-index: 0;" class="">1. Once dropped, an Ajax query is activated</li> 
                <li id="recordsArray_4" style="opacity: 1; z-index: 0;" class="">4. It is very very easy</li> 
                <li id="recordsArray_5" style="opacity: 1; z-index: 0;" class="">5. It is very very easy</li> 
                <li id="recordsArray_6" style="opacity: 1; z-index: 0;" class="">6. It is very very easy</li> 
                <li id="recordsArray_7" style="opacity: 1; z-index: 0;" class="">7. It is very very easy</li> 
            </ul> 
        </p> 
         
        <p id="contentRight"></p> 
     
    </p> 
 
 
 
</body></html> 

<html xmlns="https://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="https://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js"></script><style type="text/css"></style>
<script type="text/javascript" src="https://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-ui-1.7.1.custom.min.js"></script>

 

<style>
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 margin-top: 10px;
}

ul {
 margin: 0;
}

#contentWrap {
 width: 700px;
 margin: 0 auto;
 height: auto;
 overflow: hidden;
}

#contentTop {
 width: 600px;
 padding: 10px;
 margin-left: 30px;
}

#contentLeft {
 float: left;
 width: 400px;
}

#contentLeft li {
 list-style: none;
 margin: 0 0 4px 0;
 padding: 10px;
 background-color:#00CCCC;
 border: #CCCCCC solid 1px;
 color:#fff;
}

 

#contentRight {
 float: right;
 width: 260px;
 padding:10px;
 background-color:#336600;
 color:#FFFFFF;
}

</style>

<script type="text/javascript">
$(document).ready(function(){
        
 $(function() {
  $("#contentLeft ul").sortable({ opacity: 0.5, cursor: 'move', update: function() {
   var id="";
            $("ul.ui-sortable li").each(function(){
                id+=$(this).attr("id")+"<br/>";
            })
            $("#contentRight").html(id);
  }         
  });
 });

}); 
</script>

</head>
<body style="cursor: auto;">

 <p id="contentWrap">

 
  <p id="contentLeft">
   <ul class="ui-sortable">
                <li id="recordsArray_3" style="opacity: 1; z-index: 0;" class="">3. Returned array can be found at the right</li>
                <li id="recordsArray_2">2. Dragging changes the opacity of the item</li>
                <li id="recordsArray_1" style="opacity: 1; z-index: 0;" class="">1. Once dropped, an Ajax query is activated</li>
                <li id="recordsArray_4" style="opacity: 1; z-index: 0;" class="">4. It is very very easy</li>
                <li id="recordsArray_5" style="opacity: 1; z-index: 0;" class="">5. It is very very easy</li>
                <li id="recordsArray_6" style="opacity: 1; z-index: 0;" class="">6. It is very very easy</li>
                <li id="recordsArray_7" style="opacity: 1; z-index: 0;" class="">7. It is very very easy</li>
   </ul>
  </p>
  
  <p id="contentRight"></p>
 
 </p>

 

</body></html>

 

 

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_8828.html