以ä¸å¯¹ä½¿ç¨jQuery DraggableåDroppableå®ç°ææ½åè½çæ¹æ³è¿è¡äºè¯¦ç»çåæä»ç»ã
第ä¸æ¥ï¼å·¦ä¾§å
ç´ å¯ä»¥æ
å®æ¹ç»åºçå®ä¾æ¯ç´æ¥å¨è¦æå¨çå
ç´ ä¸æ·»å class="ui-widget-content"ãæåå¨ææè¦æå¨çå
ç´ é½æ·»å äºâui-widget-contentâç±»å«ãä½æ¯æµè¯æå¨ç»æï¼åç°å
ç´ åªè½å¨å®æå¨çcontaineréé¢æå¨ï¼åå¾å³æå¨ï¼divä¼åºç°æ°´å¹³æåç´æ»å¨æ¡container设置äºoverflow:autoã
第äºæ¥ï¼å°è¦æçå
ç´ å
容å¤å¶å°draggableDivä¸ãå®ç°æå¨ç¶èç¹æ¶ï¼å
¶ä¸é¢çåèç¹å
ç´ ä¹è¦ææ¾å°å³è¾¹ãå¦ææ¯æå¨çåèç¹å
ç´ ï¼å°±å¨å³è¾¹ç´æ¥æ¾ç¤ºåèç¹å
ç´ ãç¶èç¹ååèç¹æ¯ç¸å¯¹çï¼å 为左侧æ å½¢ç»æçèç¹å¯ä»¥æ¯æ é级çï¼æ以ä¸ä¸ªå
ç´ æ¢å¯è½æ¯åèç¹å
ç´ ï¼ä¹ä¼æ¯ç¶èç¹å
ç´ ãéè¿çå¬é¼ æ çmousedownåmouseupäºä»¶ï¼æ¥å¤æç¨æ·å¨æå¨å
ç´ ã
var clickElement = null; $(".threepanels .ptreelist").bind("mousedown",function (event) {
//è·åå½åmousedownå
ç´ çå
容
var itemContent = $(this).html(); var draggableDiv = $("#draggableDiv");
$(draggableDiv).css({ "display": "block", "height": 0 });
//å°ç¹å»çå
ç´ å
容å¤å¶
clickElement = $(this).clone();
var currentdiv = $(this).offset(); $(draggableDiv).css({ "top": currentdiv.top, "left": currentdiv.left }); draggableDiv.trigger(event);
//åæ¶é»è®¤è¡ä¸º return false; });
$("#draggableDiv").mouseup(function (event) { $(this).css({ "height": "0" }); });
//æå¨å
ç´ æ¶é¼ æ çä½ç½®
var dragDivLeft = 0;
var dragDivTop = 0;
$("#draggableDiv").draggable({ containment: "parent", drag: function (event, ui) { $("#draggableDiv").css({ "width": "260px", "height": "22px" });
$("#draggableDiv").append(clickElement);
var closeTop = $(".closeBar").offset().top;
dragDivLeft = event.target.offsetLeft;
dragDivTop = event.target.offsetTop; },
stop: function () {
//ææ½ç»æï¼å°ææ½å®¹å¨å
容æ¸
空
$("#draggableDiv").html("");
$("#draggableDiv").css({"height":"0"}); }
});
第ä¸æ¥ï¼å³è¾¹çå
ç´ å¯ä»¥æ¾å°æå®çä½ç½®ä¸
éè¦å°å
ç´ æå°æå®çåºåéé¢ï¼ç¶åéæ¾æä½ãå®æâæ¾âçæä½ãå¯ä»¥ä»ä¸å¾çåºï¼ææ¯å°å
ç´ çä¸è¾¹å·¦è¾¹åä¸è¾¹ç¼ç左边åå°ä¸ä¸ªæ°ç»éé¢ãç¶åå¨âæâçè¿ç¨ä¸ï¼ä¸ç´è®°å½äºæå¨ç左边ï¼æ¾å°å³ä¾§æ¶ï¼å°±å¯ä»¥å¤æå½åå
ç´ å°è¦æ¾çä½ç½®ãå
·ä½å¯ä»¥ä¸è½½ä»£ç æ¥çã
å®æ代ç ä¹åçææå¾å¦ä¸ï¼
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Draggable and Droppable Demo</title>
<style type="text/css">
/*reset style*/
body {
color: #333;
font-size: 14px;
line-height: 22px;
font-family: "Helvetica","Arial","微软雅黑","宋体";
}
ul, li, p {
padding: 0;
margin: 0;
}
a {
color: #0064a0;
padding: 1px;
text-decoration: none;
}
a:hover {
color: #26a0da;
text-decoration: underline;
}
#leftpanel {
float: left;
}
.peopletabs li {
list-style-type: none;
}
#maincontainer {
width: 800px;
height: 350px;
margin: 0 auto;
border: 2px solid #0069a0;
padding: 10px;
}
#schoolproperty {
height: 250px;
border: 1px solid green;
padding: 10px;
overflow: auto;
width: 350px;
float: left;
}
#selectedschool {
float: right;
}
#rightlistcontainer {
width: 300px;
height: 250px;
overflow: auto;
float: right;
border: 1px solid green;
padding: 10px;
}
#peopleproperty ul {
list-style-type: none;
}
.ptreelist li {
display: block;
width: 200px;
}
/*拖动的元素最好设置一个宽带和高度*/
#draggableDiv {
z-index: 1000;
background-color: Green;
width: 308px;
height: 22px;
position: absolute;
color: #fff;
}
#middlepanel {
width: 100px;
float: left;
margin-top: 120px;
}
#rightlistcontainer .remove {
padding: 5px;
border: 1px solid #b4b4b4;
background: #cdcdcd;
}
#rightlistcontainer .remove li {
width: 240px;
background-color: #cdcdcd;
padding: 0 5px;
background: #fff;
margin-top: 3px;
cursor: move;
}
#blankarea {
margin-top:10px;
height: 50px;
border: 1px dotted red;
}本回答被网友采纳