1. 程式人生 > >sortable圖片拖拽外掛

sortable圖片拖拽外掛

<!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">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script language
="javascript" src="jquery-1.7.min.js">
</script> <script language="javascript" src="jquery.sortable.js"></script> <script> $(document).ready(function(){ getlivesortable(); }); function getlivesortable(){ if ($('.imageDragSortView'
).html()) $('.imageDragSortView').sortable(); }
</script> </head> <body> <div id="img_div"> <ul class="imageDragSortView"> <li draggable="true"> <a href="#" target='_blank'> <img src="http://zqebay.com/uploads/2016/201606/20160606/wish-source-img/1465182264792-P-6795.png"
width="100" height="100" border="0" />
</a> </li> <li draggable="true"> <a href="#" target='_blank'> <img src="http://zqebay.com/uploads/2016/201606/20160606/wish-source-img/1465182246602-P-6795.jpg" width="100" height="100" border="0" /> </a> </li> <li draggable="true"> <a href="#" target='_blank'> <img src="http://zqebay.com/uploads/2016/201606/20160606/wish-source-img/1465182246893-P-6795.jpg" width="100" height="100" border="0" /> </a> </li> </ul> </div> </body> </html>

對圖片的拖拽、排序有很方便的功能。 具體檔案可以去csdn我的資源庫裡下載

使用過程中出現過的問題
1.拖拽效果不理想,第一張圖片不能被拖拽。 原因(getlivesortable();這個方法被呼叫2次或者2次以上,只需要呼叫一次即可)