Ext的拖放官方案例研究

最新推荐文章于 2017-09-23 20:34:05 发布

wangzff

最新推荐文章于 2017-09-23 20:34:05 发布

阅读量1.1k

点赞数

分类专栏： extjs 文章标签： ext function class div border stylesheet

本文链接：https://blog.csdn.net/wangzff/article/details/6587988

版权

extjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

EXT中拖拽的五个步骤（extjs.com官方论坛上搞来的)

5 Steps to Understanding Drag and Drop with Ext JS

One of the most powerful interaction design patterns available to developers is “Drag and Drop.” We utilize Drag and Drop without really giving it much thought – especially when its done right. Here are 5 easy steps to ensure an elegant implementation.

案例拖拽流程图：

实例代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>

<style type="text/css">
body {
	padding: 10px;
}

.availableLot {
	width: 105px;
	border: 1px solid #999999;
	padding: 10px;
	height: 290px;
	-moz-border-radius: 17px;
	-webkit-border-radius: 17px;
}

.rented,.repair {
	width: 195px;
}

.availableLot div {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	width: 85px;
	border: 1px solid #666666;
	padding: 3px;
	background-color: #FFFFFF;
	margin: 5px;
	cursor: move;
	text-align: center;
}

#cars div,#trucks div {
	margin: 5px;
	width: 85px;
}

#repair div,#rented div {
	float: left;
	margin: 2px;
	/*padding:           3px;*/
}

.imgThumb {
	height: 57px;
	width: 77px;
	border: 1px solid #777777;
}

.dropOK {
	background-color: #99ff99 !important;
}

.dropNotOK {
	border: 1px solid #FF0000 !important;
}
</style>

<!--[if IE]>

<style type="text/css">
    body  {
        padding: 10px;
    }

    .availableLot {
        width:            120px;
        border:           1px solid #999999;
        padding:          10px;
        height:           320px;
    }


    .rented, .repair {
        width:            210px;
    }

    .availableLot div {
        width:             85px;
        border:            1px solid #666666;
        padding:           3px;
        background-color:  #FFFFFF;
        margin:            5px;
        cursor:            move;
        text-align:        center;
    }

    #cars div, #trucks div {
        margin: 5px;
        width:  85px;
    }

    #repair div, #rented div {
        float:  left;
        margin: 2px;
    }

    .imgThumb {
        height:  57px;
        width:   77px;
        border:  1px solid #777777;
    }


    .dropOK {
        background-color: #99ff99 !important;
    }

    .dropNotOK {
        border: 1px solid #FF0000 !important;
    }
</style>
<![endif]-->

</head>
<body>
	<table class="x-unselectable">
		<tr>
			<td>
				<table>
					<tr>
						<td align='center'>Available Cars</td>
						<td align='center'>Available Trucks</td>
					</tr>


					<tr>
						<td>
							<div id="cars" class="availableLot">
								<div>
									<img src="img/camaro.jpg" class="imgThumb" qtip="Camaro" />
								</div>
								<div>
									<img src="img/miata.jpg" class="imgThumb" qtip="Miata" />
								</div>

								<div>
									<img src="img/mustang.jpg" class="imgThumb" qtip="Mustang" />
								</div>
								<div>
									<img src="img/corvette.jpg" class="imgThumb" qtip="Corvette" />
								</div>
							</div></td>

						<td>
							<div id="trucks" class="availableLot trucksLot">
								<div>
									<img src="img/f150.jpg" class="imgThumb" qtip="F150" />
								</div>
								<div>
									<img src="img/tahoe.jpg" class="imgThumb" qtip="Tahoe" />
								</div>

								<div>
									<img src="img/tacoma.jpg" class="imgThumb" qtip="Tacoma" />
								</div>
								<div>
									<img src="img/s10.jpg" class="imgThumb" qtip="S10" />
								</div>
							</div></td>
					</tr>

				</table></td>
			<td align='center' style="width: 200px;">

				<table>
					<tr>
						<td align='center' style="width: 200px;">Vehicles Rented</td>
						<td align='center' style="width: 200px;">Vehicles In Repair</td>
					</tr>
					<tr style="">

						<td style="">
							<div id="rented" class="availableLot rented"></div></td>
						<td>
							<div id="repair" class="availableLot repair"></div></td>
					</tr>

				</table></td>
		</tr>
	</table>
	<script type="text/javascript">
		Ext
				.onReady(function() {
					Ext.QuickTips.init();
					// A list of method overrides
					var overrides = {
						// Only called when element is dragged over the a dropzone with the same ddgroup
						onDragEnter : function(evtObj, targetElId) {
							// Colorize the drag target if the drag node's parent is not the same as the drop target
							if (targetElId != this.el.dom.parentNode.id) {
								this.el.addClass('dropOK');
							} else {
								// Remove the invitation
								this.onDragOut();
							}
						},
						// Only called when element is dragged out of a dropzone with the same ddgroup
						onDragOut : function(evtObj, targetElId) {
							this.el.removeClass('dropOK');
						},
						//Called when mousedown for a specific amount of time
						// 获取在拖动的那个元素
						b4StartDrag : function() {
							if (!this.el) {
								this.el = Ext.get(this.getEl());
							}
							//this.el.highlight();
							//Cache the original XY Coordinates of the element, we'll use this later.
							// 先记下原始坐标，后面有用  
							this.originalXY = this.el.getXY();
						},
						// Called when element is dropped not anything other than a
						// dropzone with the same ddgroup
						// 不在一个拖放组里面的就是无效drop  
						onInvalidDrop : function() {
							this.invalidDrop = true;

						},
						 // 无效置下真正的逻辑  
						endDrag : function() {
							if (this.invalidDrop === true) {
								this.el.removeClass('dropOK');
								 // 定义动画的配置项对象  
								var animCfgObj = {
									easing : 'elasticOut',
									duration : 1,
									scope : this,
									callback : function() {
										this.el.dom.style.position = '';
									}
								};
								// 应用动画  
								this.el.moveTo(this.originalXY[0],
										this.originalXY[1], animCfgObj);
								delete this.invalidDrop;
							}

						},
						// Called upon successful drop of an element on a DDTarget with the same
						onDragDrop : function(evtObj, targetElId) {
							// Wrap the drop target element with Ext.Element
							var dropEl = Ext.get(targetElId);

							// Perform the node move only if the drag element's parent is not the same as the drop target
							if (this.el.dom.parentNode.id != targetElId) {

								// Move the element
								dropEl.appendChild(this.el);

								// Remove the drag invitation
								this.onDragOut(evtObj, targetElId);

								// Clear the styles
								this.el.dom.style.position = '';
								this.el.dom.style.top = '';
								this.el.dom.style.left = '';
							} else {
								// This was an invalid drop, lets call onInvalidDrop to initiate a repair
								this.onInvalidDrop();
							}
						}
					};

					// Configure the cars to be draggable
					var carElements = Ext.get('cars').select('div');
					Ext.each(carElements.elements, function(el) {
						var dd = new Ext.dd.DD(el, 'carsDDGroup', {
							isTarget : false
						});
						Ext.apply(dd, overrides);
					});

					var truckElements = Ext.get('trucks').select('div');
					Ext.each(truckElements.elements, function(el) {
						var dd = new Ext.dd.DD(el, 'trucksDDGroup', {
							isTarget : false
						});
						Ext.apply(dd, overrides);
					});

					//Instantiate instances of Ext.dd.DDTarget for the cars and trucks container
					var carsDDTarget = new Ext.dd.DDTarget('cars',
							'carsDDGroup');
					var trucksDDTarget = new Ext.dd.DDTarget('trucks',
							'trucksDDGroup');

					//Instantiate instnaces of DDTarget for the rented and repair drop target elements
					var rentedDDTarget = new Ext.dd.DDTarget('rented',
							'carsDDGroup');
					var repairDDTarget = new Ext.dd.DDTarget('repair',
							'carsDDGroup');

					//Ensure that the rented and repair DDTargets will participate in the trucksDDGroup
					rentedDDTarget.addToGroup('trucksDDGroup');
					repairDDTarget.addToGroup('trucksDDGroup');

				});
	</script>
</body>
</html>