jquery ui实现拖动排序

104 篇文章 0 订阅
104 篇文章 0 订阅

解决了横向拖动产生错位的问题,原因是拖动时会给ul添加一个class=hFinderCategoryFilePlaceholder的li,需要把它指定为float并添加宽高,另外拖动完成要去掉hFinderCategoryFileSelected这个class

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title></title>
<script src="js/jquery1.7.js"></script>
<script type='text/javascript' src='js/jquery-ui.js'></script>
<script type='text/javascript' src='js/Example 11-3.js'></script>
<link type='text/css' href='style/Example 11-3.css' rel='stylesheet' />
</head>
<body>
<div id='hFinderCategoryFileWrapper'>
  <ul id='hFinderCategoryFiles'>
    <li class="hFinderCategoryFile" title="第一个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="#"> 第一个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title="第二个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="/Blog/php/Polymorphism.html"> 第二个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title="第三个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="/Blog/php/Backup%20Script.html"> 第三个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title="第四个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="/Blog/web/html5_doctype.html"> 第四个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title=" 第五个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="/Blog/web/ie8_beta2.html"> 第五个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title="第六个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="#"> 第六个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title="第七个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="/Blog/php/Polymorphism.html"> 第七个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title="第八个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="/Blog/php/Backup%20Script.html"> 第八个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title="第九个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="/Blog/web/html5_doctype.html"> 第九个 </a> </div>
    </li>
    <li class="hFinderCategoryFile" title=" 第十个">
      <div class="hFinderCategoryFileIcon"></div>
      <div class="hFinderCategoryFilePath"> <a href="/Blog/web/ie8_beta2.html"> 第十个 </a> </div>
    </li>
  </ul>
  <!--<ul id='hFinderOtherCategoryFiles'>
      </ul>-->
</div>
</body>
</html>

 

js代码

 

$(document).ready(
  function() {  
    var $selectedFile;
 
    $('li.hFinderCategoryFile').mousedown(
      function() {
        if ($selectedFile && $selectedFile.length) {
          $selectedFile.removeClass('hFinderCategoryFileSelected');
        }

        $selectedFile = $(this);       
        $selectedFile.addClass('hFinderCategoryFileSelected');
      }
    );

    var saveUpdate = function(e, ui) {
      var $data = $(this).sortable(
        'serialize', {
          attribute: 'title',
          expression: /^(.*)$/,
          key: 'list[]'
        }
      );
$(".hFinderCategoryFile").removeClass("hFinderCategoryFileSelected");
      alert($data);

      // Here you could go on to make an AJAX request
      // to save the sorted data on the server, which
      // might look like this:
      //
      // $.get('/path/to/server/file.php', $data);
    };

    $('ul#hFinderCategoryFiles').sortable({
      connectWith : [
        'ul#hFinderOtherCategoryFiles'
      ],
      placeholder: 'hFinderCategoryFilePlaceholder',
      opacity: 0.8,
      cursor: 'move',
      update: saveUpdate
    });
   
    $('ul#hFinderOtherCategoryFiles').sortable({
      connectWith : [
        'ul#hFinderCategoryFiles'
      ],
      placeholder: 'hFinderCategoryFilePlaceholder',
      opacity: 0.8,
      cursor: 'move',
      update: saveUpdate
    });
  }
);

 

 

css代码:

html,
body {
    width: 100%;
    height: 100%;   
}
body {
    font: normal 12px "Lucida Grande", Arial, sans-serif;
    background: rgb(189, 189, 189);
    color: rgb(50, 50, 50);
    margin: 0;
    padding: 0;
}

ul#hFinderCategoryFiles,
ul#hFinderOtherCategoryFiles {
 width: 700px;
    border-bottom: 1px solid rgb(64, 64, 64);
    border-right: 1px solid rgb(64, 64, 64);
    background: #fff;
    list-style: none;
   margin:0 auto;
    padding: 0;
}
li.hFinderCategoryFile {
 float: left;
    padding: 5px 5px 10px 5px;
    min-height: 48px;
    width: 120px;
}
li.hFinderCategoryFile h5 {
    font: normal 12px "Lucida Grande", Arial, sans-serif;
    margin: 0;
}
div.hFinderCategoryFileIcon {
    float: left;
    width: 48px;
    height: 48px;
    background:url(../images/Safari%20Document.png)no-repeat;
}
h5.hFinderCategoryFileTitle,
div.hFinderCategoryFilePath {
    padding-left: 55px;
}
li.hFinderCategoryFileSelected {
    background: rgb(24, 67, 243);
    color: white;
}
li.hFinderCategoryFileSelected a {
    color: lightblue;
}

.hFinderCategoryFilePlaceholder {
    float:left;
    background: rgb(230, 230, 230);
    height: 58px; width: 135px;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值