开发学院网页设计JavaScript jquery应用-图片拖拽排序 阅读

jquery应用-图片拖拽排序

 2010-09-14 13:09:29 来源:WEB开发网   
核心提示:最近在研究Interface elements for jQuery(http://interface.eyecon.ro/),此插件封装了一些拖拽效果,jquery应用-图片拖拽排序,并且使用非常简单,能轻松实现拖拽排序、购物车、博客首页排版等UI

最近在研究Interface elements for jQuery(http://interface.eyecon.ro/),此插件封装了一些拖拽效果,并且使用非常简单,能轻松实现拖拽排序、购物车、博客首页排版等UI,所以模仿和讯的图片排序做了一个简单样例:

预览:

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Sortables demo - Interface plugin for jQuery</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="interface.js"></script>
<style type="text/css" media="all">
body
{}{
  background: #fff;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
}
#sort1
{}{
  width: 350px;
  height: 200px;
}
div img
{}{
  float: left;
  width: 60px;
  height: 60px;
  margin:10px;
  border:solid 3px #ccc;
}
.sorthelper
{}{
  background-color: #f5f5f5;
  float: left;
  border:4px solid #ccc;
}
.sortableactive
{}{
}
.sortablehover
{}{
}
</style>
</head>
<body>
<div id="sort1">
  <img src=http://tech.ddvip.com/2008-09/"1.jpg" class="sortableitem" id="1" alt="1"/>
  <img src=http://tech.ddvip.com/2008-09/"2.jpg" class="sortableitem" id="2" alt="2"/>
  <img src=http://tech.ddvip.com/2008-09/"3.jpg" class="sortableitem" id="3" alt="3"/>
  <img src=http://tech.ddvip.com/2008-09/"4.jpg" class="sortableitem" id="4" alt="4"/>
  <img src=http://tech.ddvip.com/2008-09/"5.jpg" class="sortableitem" id="5" alt="5"/>
  <img src=http://tech.ddvip.com/2008-09/"6.jpg" class="sortableitem" id="6" alt="6"/>
</div>
<div class="serializer">
<a href="#" onClick="serialize(); return false;" >提交排序</a>
</div>
<script type="text/javascript">
$(document).ready(
  function () {
    $('#sort1').Sortable(
      {
        accept :     'sortableitem',  //拖拽元素class名
        helperclass :   'sorthelper',   //拖拽时投放位置的样式 
        activeclass :   'sortableactive', //拖拽时悬空时class
        hoverclass :   'sortablehover', //拖拽时经过时class
        opacity:     0.5,       //拖拽时透明度  
        fx:        200,       //拖拽时回位速度
        revert:      true,
        floats:      true,
        tolerance:    'pointer',
        onchange:    changedata     //拖拽状态改变时触发事件
      }
    )
  }
);
function changedata()
{
}
function serialize(s)
{
  serial = $.SortSerialize(s);
  alert(serial.hash.replace(/&sort1[]=/g,",").replace("sort1[]=",""));
  /**//*这里可使用jquery form插件ajax提交
  (http://www.malsup.com/jquery/form/#code-samples)
    使用也非常方便
  */
};
</script>  
</body>
</html>

Tags:jquery 应用 图片

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接