快捷導(dǎo)航

jQueryUI寫一個(gè)調(diào)整分類的拖放效果實(shí)現(xiàn)代碼

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

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

所以還是自己動(dòng)手豐衣足食，還是堅(jiān)持簡(jiǎn)單就是美的代碼風(fēng)格。

試試在iframe里嵌入一個(gè)測(cè)試頁(yè)面，你可以使用鼠標(biāo)拖動(dòng)項(xiàng)目，調(diào)整分類：

當(dāng)然，這并不是我要的最終效果，只能說(shuō)它已經(jīng)實(shí)現(xiàn)了一個(gè)我想要的拖放效果。我要求的在這個(gè)基礎(chǔ)上，還要增加自動(dòng)排序，位置變更后恢復(fù)之前元素bind的jQuery事件等。

代碼

代碼如下，如要復(fù)制，請(qǐng)先查看純文本版本！

復(fù)制代碼代碼如下:

 
<!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> 

您可能感興趣的文章:

拖放效果

相關(guān)文章

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