使用JQuery UI插件以拖动的方式管理图片8－9

来源：互联网发布：db2和mysql sql语句编辑：程序博客网时间：2024/05/21 17:29

html代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>使用JQuery UI插件以拖动的方式管理图片</title><script type="text/javascript" src="lib/jquery-2.1.1.js"></script><script type="text/javascript" src="lib/jquery-ui.min.js"></script><link rel="stylesheet" type="text/css" href="css/jquery-ui.css"><link rel="stylesheet" type="text/css" href="8-9.css"><script type="text/javascript">$(function(){var $photo = $("#photo");var $trash = $("#trash");$("li",$photo).draggable({revert:"invalid",helper:"clone",cursor:"move"});$trash.droppable({accept:"#photo li",activeClass:"highlight",drop:function(event,ui){deleteImage(ui.draggable)}});$photo.droppable({accept:"#trash li",activeClass:"active",drop:function(event,ui){recyleImage(ui.draggable);}});var recylelink = "<a href='#' title='从回收站还原' class='phrefresh'>还原</a>";function deleteImage($item){$item.fadeOut(function(){var $list = $("<ul class='photo reset'/>").appendTo($trash);$item.find("a.phtrash").remove();$item.append(recylelink).appendTo($list).fadeIn(function(){$item.animate({width:"100px"}).find("img").animate({height:"100px"});});});}var trashlink = "<a href='#' title='放入回收站' class='phtrash'>删除</a>";function recyleImage($item){$item.fadeOut(function(){$item.find("a.phrefresh").remove().end().css("width","100px").append(trashlink).find("img").css("height","100px").end().appendTo($photo).fadeIn();});}$("ul.photo li").click(function(event){var $item = $(this),$target = $(event.target);if($target.is("a.phtrash")){deleteImage($item);}else if($target.is("a.phrefresh")){recyleImage($item);}return false;});});</script></head><body><div class="phframe"><ul id="photo" class="photo"><li class="photoframecontent photoframetr"><h5 class="photoframeheader">图片1</h5><img src="../Images/001.gif" alt = "" width="100px" height="100px"/><span>图片1说明</span><a href="#" title="放入回收站" class="phtrash">删除</a></li><li class="photoframecontent photoframetr"><h5 class="photoframeheader">图片2</h5><img src="../Images/002.gif" alt = "" width="100px" height="100px"/><span>图片2说明</span><a href="#" title="放入回收站" class="phtrash">删除</a></li><li class="photoframecontent photoframetr"><h5 class="photoframeheader">图片3</h5><img src="../Images/003.gif" alt = "" width="100px" height="100px"/><span>图片3说明</span><a href="#" title="放入回收站" class="phtrash">删除</a></li></ul><div id="trash" class="photoframecontent"><h4 class="photoframeheader">回收站</h4></div></div></body></html>

css代码：

@CHARSET "UTF-8";body{font-size:11px;font-family:Verdana,Arial,sans-self;}#photo{float:left;width:55%;min-height:12em;padding:0;margin:0px;list-style-type:none;}#photo li{float:left;width:96px;padding:0.4em;margin:0 0.4em 0.4em 0;text-align:center;}#photo li h5{margin:0 0 0.4em;cursor:move;}#photo li span{float:left;}#photo li a{float:right;}#photo li img{width:98%;cursor:move;border:solid 1px #eee;margin-bottom:3px}.phframe{width:1000px;}.photoframecontent{border:1px solid #ccc;color:#666;}.photoframecontent a{color:#666;}.photoframeheader{border:1px solid #ccc;background-color:#ccc;color:#666;font-weight:bold';}.photoframeheader a{color:#666;}.photoframetr{-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;}.active{background:#eee;}.highlight{border:1px solid #fcefa1;background:#fbf9ee}.reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style-:none}.phtrash,.phrefresh{color:#666;}#trash{float:right;width:42%;min-height:18em;padding:1%;}#trash h4{line-height:16px;margin:0 0 0.4em;padding:4px 0px 0px 4px;}#trash .photo h5,#trash span{display:none;}

0 0