`
axl234
  • 浏览: 260806 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery ui实现拖动排序

 
阅读更多

解决了横向拖动产生错位的问题，原因是拖动时会给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;
}

分享到：
| jquery map方法的应用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics