如何实现多张并排图片拖动排序？

页面上有几列几行的图片，现想用鼠标拖动某张可以排到指定图片的前边或后边，和以前的表格拖动不一样的，怎么办？

解决方案 »

  1.   

    可以使用div容器， 每一张图片都放在div容器中， 可以参考http://i.ifensi.com/ 的管理首页的模块拖动实现方法
      

  2.   

    抓紧学习js + css + dhtml
      

  3.   

    JKDrag里有inline对象拖动的示例： 
    JKHtml\JKDrag\JKDrag.htm 
    http://download.csdn.net/source/276201
      

  4.   

    替换位置的依据是什么能写出来吗？
    比如说图1的left比图2的left大多少时 就替换？
    或left 和 top 都满足什么条件时就替换？
      

  5.   

    写个超简单的，我们是内网写传外网很麻烦有点乱，见凉
    <script> 
    var flag = false; 
    var beginx,beginy; 
    var d1x,d1y,d2x,d2y,tx,ty; function isdown() 
    { 
    var d1 = document.all('d1'); 
    var d2 = document.all('d2'); 
    flag = true; 
    d1x = d1.style.left; 
    d1y = d1.style.top; 
    d2x = d2.style.left; 
    d2y = d2.style.top; 
    } function move() 
    { 
    var d1 = document.all('d1'); 
    if(flag) 
    { 
    d1.style.cursor = 'move'; 
    var x = event.clientX - beginx; 
    var y = event.clientY - beginy; 
    d1.style.left = parseInt(d1.style.left) + x; 
    d1.style.top = parseInt(d1.style.top) + y; 
    tx = d1.style.left; 
    ty = d1.style.top; 
    d1_x.innerText = d1.style.left; 
    d1_y.innerText = d1.style.top; 
    } 
    beginx = event.clientX; 
    beginy = event.clientY; 
    } function up() 
    { 
    var d1 = document.all('d1'); 
    var d2 = document.all('d2'); 
    d1.style.cursor="; 
    flag = false; 
    if(parseInt(tx) > parseInt(d2.style.left) && parseInt(ty) > parseInt(d2.style.top)) 
    { 
    //alert('tx=' + parseInt(tx) + ',ty=' + parseInt(ty) + '\nd1x=' + parseInt(d1x) + ',d1y=' + parseInt(d1y) + '\nd2x=' + parseInt(d2x) + ',d2y=' + parseInt(d2y)) d2.style.left = d1x; 
    d2.style.top = d1y; 
    d1.style.left= d2x; 
    d1.style.top = d2y; 
    d1_x.innerText = d2x; 
    d1_y.innerText = d2y; 
    tx = 0; 
    ty = 0; 
    }
    else 
    { 
    d2.style.left = d2x; 
    d2.style.top = d2y; 
    d1.style.left= d1x; 
    d1.style.top = d1y; 
    d1_x.innerText = d1x; 
    d1_y.innerText = d1y; 
    } 
    } 
    </script> <body>
    <div id='d1' style='position:absolute; left:100px; top:100px; width:100px; height:100px; z-index:1; border:1px red solid; background-color:#FFCC66;' onmousedown='isdown()' onmousemove='move()' onmouseup='up()'>
    DIV1 
    <br />div1_x = <span id='d1_x'>100px</span>
    <br />div1_y = <span id='d1_y'>100px</span> 
    </div> <div id='d2' style='position:absolute; left:210px; top:100px; width:100px; height:100px; z-index:0; border:1px green solid; background-color:#3399CC;'>DIV2 </div> <div style='position:absolute; left:100px; top:250px; border:1px solid #6699cc; font-size:10pt; font-family:Georgia, 'Times New Roman', Times, serif; padding:5px 5px 5px 5px;'> 
    当div1的left大于div2的left并且div1的top大于div2的top时<br />替换位置,不过批量的东西还有待继续细细考虑，因为现在bug多啊 
    </div> 
    </body>
      

  6.   

    以前遇到过这种问题，参考下：
    http://www.beijibear.com/article/10-09/130.html
      

  7.   

    可以使用控件floating_gallery，详情参考：
    http://www.beijibear.com/index.php?aid=130