jquery ui实现拖动排序

最新推荐文章于 2023-12-19 10:01:28 发布

axl234

最新推荐文章于 2023-12-19 10:01:28 发布

阅读量134

点赞数

分类专栏： css javascript jquery 文章标签： ui javascript xhtml ViewUI

本文链接：https://blog.csdn.net/axl234/article/details/84214742

版权

javascript 同时被 3 个专栏收录

158 篇文章 0 订阅

订阅专栏

css

104 篇文章 0 订阅

订阅专栏

jquery

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>

</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;
}

axl234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery ui实现拖动排序

解决了横向拖动产生错位的问题，原因是拖动时会给ul添加一个class=hFinderCategoryFilePlaceholder的li，需要把它指定为float并添加宽高，另外拖动完成要去掉hFinderCategoryFileSelected这个class &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h...
复制链接

扫一扫