jQueryUI寫一個調整分類的拖放效果實現(xiàn)代碼

更新時間：2012年05月10日 01:09:38 作者：

最近，想用jQuery做一個網(wǎng)頁的樹目錄結構，并且可以使用鼠標拖動調整選項的位置。我在網(wǎng)上找了一下插件，基本上看了好幾款比較著名的，都覺得代碼太復雜了或者界面太丑了等各種不符合我的要求

所以還是自己動手豐衣足食，還是堅持簡單就是美的代碼風格。

試試在iframe里嵌入一個測試頁面，你可以使用鼠標拖動項目，調整分類：

當然，這并不是我要的最終效果，只能說它已經實現(xiàn)了一個我想要的拖放效果。我要求的在這個基礎上，還要增加自動排序，位置變更后恢復之前元素bind的jQuery事件等。

代碼

代碼如下，如要復制，請先查看純文本版本！

復制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>Drag & Drop Test</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" 
src="https://readself.com/static/js/jquery.min.js?v=52337"></script> 
<script type="text/javascript" 
src="https://readself.com/static/js/jquery-ui.min.js?v=ab482"></script> 
<link rel="stylesheet" type="text/css" 
 /> 
<style type="text/css"> 
li {cursor: pointer} 
.menu_hover {background-color: #d0d0d0;} 
#menu p{margin: 5px 0 5px 0;} 
</style> 
<body> 
<ul id="menu"> 
<li class="folder"> 
<p>Fruits</p> 
<ul> 
<li>Apple</li> 
<li>Pear</li> 
<li>Banana</li> 
</ul> 
</li> 
<li class="folder"><p>Vegetables</p> 
<ul> 
<li>Tomato</li> 
<li>Potato</li> 
<li>Cucumber</li> 
</ul> 
</li> 
<li class="folder"><p>Meet</p> 
<ul> 
<li>Beaf</li> 
<li>Pork</li> 
<li>Chicken</li> 
</ul> 
</li> 
</ul> 

<script> 
$('#menu li').disableSelection(); 
$('li', $('#menu ul')).draggable({revert: 'invalid', helper: 'clone'}); 
$('#menu .folder').droppable({ 
hoverClass: "menu_hover", 
drop: function(event, ui){ 
if(ui.draggable.parents('.folder').get(0) == $(this).get(0)) 
return ; 
$('ul', this).append(ui.draggable.clone()); 
ui.draggable.remove(); 
$('li', this).draggable({remove: 'invalid', helper: 'clone'}); 
} 
}); 
$('#menu .folder p').click(function(){ 
$(this).next().toggle(); 
}); 
</script> 

您可能感興趣的文章:

拖放效果

原生javascript實現(xiàn)的分頁插件pagenav
這幾天要做一個前臺頁面,涉及到分頁,不想自己去寫所以在網(wǎng)上找jquery看有沒有好用一點的分頁組件,結果發(fā)現(xiàn)有很多,但是都很麻煩,看到了這個叫pagenav的發(fā)現(xiàn)相對來說還是很容易上手的,于是就直接用了,在我看來,能解決問題的辦法就是好辦法.越簡單越好.
2014-08-08
jQuery插件FusionWidgets實現(xiàn)的AngularGauge圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionWidgets實現(xiàn)的AngularGauge圖效果,結合具體實例形式分析了jQuery使用FusionWidgets插件載入xml數(shù)據(jù)實現(xiàn)AngularGauge圖的相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery選擇器之層次選擇器用法實例分析
這篇文章主要介紹了jQuery選擇器之層次選擇器用法,結合實例形式分析了jQuery后代元素選擇器、子元素選擇器、相鄰元素選擇器、兄弟元素選擇器等相關使用技巧,需要的朋友可以參考下
2019-02-02
jQuery+css+html實現(xiàn)頁面遮罩彈出框
面遮罩彈出框已經不是一個陌生的話題了，實現(xiàn)的方法大同小異多種多樣，今天用jQuery實現(xiàn)頁面遮罩彈出框，主要用的技術有JQuery，css和html,感興趣的朋友可以參考下哈
2013-03-03
寫JQuery插件的基本知識
這篇文章主要介紹了從如何寫JQuery插件，需要注意的事項，還有必須要做的步驟，看過這個文章相信你會明白如何寫好一個JQuery插件
2013-11-11
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯誤
今天測試偶然發(fā)現(xiàn)jquery.bgiframe.js在IE9環(huán)境下提示錯誤，于是很是好奇，想辦法知道究竟，于是搜索了一下，現(xiàn)在與大家分享希望可以幫助你們
2013-01-01
基于Jquery實現(xiàn)表單驗證
本文給大家分享的是一段基于Jquery實現(xiàn)表單驗證的代碼，非常簡單實用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-08-08
基于jquery的滾動條滾動固定div(附演示下載)
今天與大家分享一下我寫的一個滾動條滾動固定div的例子，現(xiàn)在很多地方都可以看到這樣的效果
2012-10-10
jquery實現(xiàn)拖拽添加元素功能
這篇文章主要為大家詳細介紹了jquery實現(xiàn)拖拽添加元素功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
基于jquery的獲取瀏覽器窗口大小的代碼
今天正好用到這個，就網(wǎng)上搜了搜，貼出來了。需要的朋友可以參考下。
2011-03-03