拖放
最强大的交互设计模式，为开发人员提供一个“拖放。” 我们没有真正给它多想利用拖放 - 特别是当它做的权利。这里有5个简单的步骤，以确保一个优雅的实施。
定义拖放
拖动操作，基本上，是一些UI元素点击手势，鼠标按钮被按住，鼠标移动。拖动操作后释放鼠标按钮时，会出现一个下拉操作。从一个高层次，拖动和下降的决定，可以概括为以下流程图。
要加快发展，Ext JS的提供我们，与Ext.dd类来管理我们的基本决定。在本指南中，我们将覆盖编码的外观和清除下拉邀请，无效下跌的修复和一个成功的下降发生时会发生什么。
组织拖放类
一个在Ext.dd文档类乍一看似乎有点吓人。但是，如果我们采取快速的时刻，看类，我们可以看到，他们都干的DragDrop类和最可拖放或降组。多一点的时间和挖掘，我们可以看到，类可以进一步分为单节点和多节点拖动或下降相互作用。
以了解阻力的基本知识和下降，我们将重点放在应用单一的拖放互动DOM节点。要做到这一点，我们将利用DD和DDTarget类的，它提供了各自的拖放行为的基础上实现。然而，我们要讨论的，我们的目标是什么之前，我们就可以开始执行拖放。
手头的任务
比方说，我们已经要求开发一个应用程序，将提供汽车租赁公司将自己的轿车和卡车，在三种状态之一：可租用，或在维修状态的能力。只允许被放置在各自的“可用”集装箱车和卡车。
上手，我们必须作出的轿车和卡车的“dragable”。对于这一点，我们将使用DD。我们需要使集装箱出租，维修和车辆“下降目标”。为此，我们将使用DDTarget。最后，我们将使用不同的的拖放团体，以协助执行的轿车和卡车，只能下降到各自的“可用的”容器的要求。这个例子中的HTML和CSS已经建成，并可以在这里下载。下载，我们可以开始编码的轿车和卡车的拖动操作。
第1步：拖动开始
要配置车辆的DIV dragable元素，我们需要获得一个列表，并通过它的循环化的DD的新实例。下面是我们如何做到这一点。
/ /创建一个对象，我们将使用实施和覆盖阻力行为稍晚
VAR 重写= {};
/ /配置车
覆盖对象到新创建的实例的DD
分机。申请（DD ，覆盖）;
}）;
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);
});所有拖放类被设计为通过重写它的方法实现。这就是为什么在上面的代码段，我们必须创建一个空的对象称为覆盖，这将填补在以后的具体的行动，我们需要与覆盖。我们得到的轿车和卡车的元素的列表，通过利用DomQuery的select方法查询所有孩子的div元素的汽车容器。使dragable的小汽车和卡车的元素，我们创建了一个新的DD例如，在汽车或卡车的元素被拖动和拖放组传递，这是参与进来通知，车辆类型有各自的拖放组。这将是重要的，要记住，当我们设置租用及维修容器作为放置目标。还注意到，我们正在申请的覆盖对象Ext.apply使用的DD的新创建的实例，这是一种方便的方法添加到现有对象的属性或方法。之前，我们可以继续我们的实现，我们需要一个快速的时刻，分析发生了什么，当您拖动屏幕上的一个元素。有了这种认识，其余的实施将水到渠成。
偷看在拖动节点如何影响
你会发现时拖动周围的汽车或卡车元素的第一件事是，他们将坚持无论他们被丢弃。这是现在的确定，因为我们才刚刚开始我们的实现。最重要的是要了解如何拖动节点都受到影响。这将有助于我们在返回他们原来的位置时，他们对什么是一个有效的放置目标，这被称为“无效的下降”下降编码。下面的插图使用Firebug的HTML检查小组，并强调正在由拖动操作时被应用到Camaro的元素的变化。
点击上面的图片测试拖动操作。在考察过程中拖动元素的拖动操作，我们可以看到三个CSS值填充的元素：位置，顶部和左侧的样式属性。进一步检查发现，位置属性设置为相对的顶部和左侧的更新，而节点被拖动周围的属性。一个拖动动作完成后，样式属性仍然所载的样式。这是我们必须清理我们的代码时，修复无效的下降。直到我们设置适当的下降目标，所有的拖放操作被视为无效。
第2步：修复无效的下降
阻力最小的路径是修复下重启拖动操作过程中应用的样式属性，无效的下降。这意味着，拖动的元素会消失，从它的起源和会是很无聊的鼠标和再现。使顺畅，我们将使用Ext.Fx这个动作的动画。请记住，拖放类方法重写。为了实现维修，我们将需要，覆盖b4StartDrag，onInvalidDrop和endDrag方法。让我们的覆盖对象上面添加下列方法，我们将讨论它们是什么做的。
/ /调用拖动元素的实例。
b4StartDrag ： 函数（） {
/ /缓存拖动元素
（这一点。EL ） {
EL = 分机。获得（这一点。getEl （））;
}
/ /缓存元素原有的XY坐标，我们将使用此以后。
originalXY = 这一点。EL 。getXY （）;
}
/ /调用时下降元素是不相同的ddgroup任何其他dropzone的
onInvalidDrop 函数（） {
/ /设置一个标志来调用动画修理
;
}
/ /拖动操作完成时调用
endDrag ： 函数（） {
/ /调用动画如果在invalidDrop的标志设置为true
如果 （。invalidDrop === 真） {
/ /删除下拉邀请
。EL 示例对（dropOK“ ）;
/ /创建对象的动画配置
VAR animCfgObj = {
宽松 ： “elasticOut” ，
持续时间： 1 ，
范围 ： 本，
回调 函数（） {
/ /删除的位置属性
。EL 。DOM 。风格。位置= '' ;
} } ;
/ /应用修复动画
EL （这一点。originalXY [ 0 ]， 这。originalXY [ 1 ]，animCfgObj ）;
删除 。invalidDrop ;
} }在上述代码中，我们开始覆盖b4StartDrag方法，被称为“即时拖动元素开始被周围拖动屏幕，使得它的理想场所缓存拖动元素和原来的XY坐标 - 我们将在稍后使用的过程。下一步，我们重写onInvalidDrop，这是被称为当拖动节点比下降的目标是在相同的拖放组参与的任何其他下降。此重写，只需设置一个真实的地方invalidDrop财产，这将在未来的方法使用。我们覆盖的最后一个方法是endDrag，被称为拖动元素时不再被拖动周围的屏幕和拖动元素不再被鼠标移动控制。这个覆盖将移动拖放元素返回到其原始的X和Y位置，使用动画。我们配置的动画，使用elasticOut宽松，以提供凉爽和有趣的弹性效果，在动画结束。
点击上面的图片查看动画在行动修复操作。OK，现在我们有完整的修复操作。为了为它工作在下拉邀请和有效的拖放操作，我们需要设置下拉的目标。
步骤3：配置下拉目标
我们的要求决定，我们将允许轿车和卡车在被丢弃在租用和维修容器以及各自原来的容器。要做到这一点，我们需要将实例的DDTarget类的实例。下面是如何做。
/ /实例化实例Ext.dd.DDTarget
/ /实例化的DDTarget instnaces租用和维修拖放目标
/ /确保租用和修理DDTargets将参加在trucksDDGroup
rentedDDTarget 。addToGroup （“trucksDDGroup ）;
repairDDTarget， 。addToGroup （“trucksDDGroup ）;在上面的代码片断中，我们的汽车，卡车，出租和维修项目的设置放置目标。请注意，汽车容器元素只参与“carsDDGroup”和卡车容器元素参与在“trucksDDGroup”的。这有助于强制要求轿车和卡车只能在其原容器下降。接下来，我们实例化实例DDTarget租用和维修元素。最初，它们的配置只参加“carsDDGroup”。为了让他们参加在“trucksDDGroup”，我们有它添加addToGroup手段。OK，现在我们已经配置了我们的拖放目标。让我们看看会发生什么，当我们放弃一个有效的拖放元素的轿车或卡车。
点击上面的图片看到的进展，迄今。在行使下降目标，我们可以看到，拖动元素保持完全的下降。也就是说，可以被丢弃图像的任何位置上放置目标和呆在那里。这意味着，我们下降的实施是不完整的。要完成它，我们需要另一个覆盖手段的“完整的下降”的经营，DD的实例，以实际代码，我们创建了前一段时间。
第4步：完成下降
要完成的下降，我们将需要从它的父元素的元素拖动到目标元素，使用DOM工具。这是实现通过重写的DD onDragDrop方法。添加下面的方法来替代对象。
/ /调用成功下拉上与的相同DDTarget 元素后 功能（提示evtObj ，targetElId ） {
/ /封装下降目标元素Ext.Element对象
VAR dropEl 分机（targetElId ）;
/ /执行节点的移动，只有当拖动元素的
父母/ /是不相同的拖放目标
（EL 。DOM 。parentNode 。ID ！= targetElId ） {
/ /移动元素
dropEl 。appendChild （，。EL ）;
/ /删除拖动邀请
。onDragOut （提示evtObj ，targetElId ）;
/ /清除样式
。EL 。DOM 的风格。位置= '' ;
EL 。DOM 。风格。顶部= '' ;
EL 。DOM 。风格。左= '' ;
}
{
/ /这是无效的下降，启动修复
。onInvalidDrop （）;
}在上面覆盖，拖动元素被移动到目标元素，但只有当它是不相同的拖放元素的父节点。拖动元素被移动后，风格从它被清除。如果下拉元素拖动元素的父级是相同的，我们确保修复操作时通过调用this.onInvalidDrop。
点击上面的图片，在行动中看到完整的拖放操作。成功后回落，拖累元素现在将被从它们的父元素移动到目标。用户如何知道他们是否是一个有效的放置目标徘徊以上吗？我们将通过配置下拉邀请的一些视觉反馈给用户。
第5步：添加下拉邀请
为了使拖放多一点，我们需要反馈给用户提供与否拖放操作可以成功地发生。这意味着我们将不得不重写的onDragEnter和onDragOut方法添加这两种方法的覆盖对象。
/ /只有调用的拖放元素时用的相同ddgroup拖超过了1滴目标
onDragEnter ： 功能（提示evtObj ，targetElId ） {
/ /彩色的阻力目标如果，拖动节点的父是没有放置目标相同
，如果 （targetElId ！= 。EL 。DOM 。parentNode 的id ） {
。EL 。addClass （“dropOK ）;
}
否则 {
/ /删除的邀请
。onDragOut （）;
} }
/ /只有调用时元素被拖出与的相同ddgroup dropzone
onDragOut ： 功能（提示evtObj ，targetElId ） {
这个EL 。示例对（“dropOK ）;
}在上面的代码中，我们覆盖onDragEnter和onDragOut的方法，这两者都是利用拖动元素时，参加在同一拖放组下降目标的交互。当鼠标光标首次下降目标的边界相交，而一拖项目是在拖动模式，只叫onDragEnter方法。同样，onDragOut被称为第一次下降，而在拖动模式目标的边界外拖时，鼠标光标。
点击上面的图片看到下拉邀请。加入替代的onDragEnter和onDragOut方法，我们可以看到，拖动元素的背景会变成绿色，当鼠标光标相交一个有效的放置目标，将失去其绿色背景时，它留下的下跌目标或将被丢弃。这就完成了我们的DOM元素的阻力和下降的情况。
它不会停止在这里
拖动和下降可以是一个可以被应用到大多在Ext JS框架的一切。这里有几个例子，你可以用它来学习如何实现拖放各种部件：
- GridPanel中来的GridPanel
- 网格FormPanel
- Ext.form.Field到GridPanel中细胞
- 使用的DragZone和DropZone
- DataView来TreePanel
总结
今天，我们学会了如何实现端到端使用的第一级的拖放实现类的DOM节点的阻力和下降。从一个高层次的，我们定义并讨论什么拖拖放和框架如何看待它。我们还了解到，可以通过拖放或下拉的行为，不管他们是否支持单个或多个阻力或拖放操作拖放类分组。在实施这种行为的同时，我们说明了，DD类有助于使某些行为的决定，我们是负责编码年底行为。我们希望你喜欢这种透彻的外观，在一些基本的拖放和拖放操作DOM节点。我们期待着为您带来更多有关此主题的文章在未来。
扫一扫
4741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
