onComplete——事件
最后是onComplete事件，将在你放下一个拖动元素时触发，而不管你是不是把它放到了一个可以接受拖动元素的元素内部。
参考代码： [复制代码] [保存代码]
- var myDrag = new Drag.Move(dragElement , {
-
-
- onComplete: function(el) {
-
- }
- });
代码示例
让我们把刚才的这些代码以一种方式组合起来，当不同的事件触发时，我们突出显示不同的内容，并且我们使用上面我们看到的选项来配置我们的Drag.Move对象：
参考代码： [复制代码] [保存代码]
- window.addEvent(''domready'', function() {
- var dragElement = $(''drag_me'');
- var dragContainer = $(''drag_cont'');
- var dragHandle = $(''drag_me_handle'');
- var dropElement = $(''.draggable'');
- var startEl = $(''start'');
- var completeEl = $(''complete'');
- var dragIndicatorEl = $(''drag_ind'');
- var enterDrop = $(''enter'');
- var leaveDrop = $(''leave'');
- var dropDrop = $(''drop_in_droppable'');
-
- var myDrag = new Drag.Move(dragElement, {
-
- droppables: dropElement,
- container: dragContainer,
-
- handle: dragHandle,
-
- onDrop: function(el, dr) {
- if (!dr) { }
-
- else {
- dropDrop.highlight(''#FB911C'');
- el.highlight(''#fff'');
- dr.highlight(''#667C4A'');
- };
- },
- onLeave: function(el, dr) {
- leaveDrop.highlight(''#FB911C'');
- },
- onEnter: function(el, dr) {
- enterDrop.highlight(''#FB911C'');
- },
-
- onStart: function(el) {
- startEl.highlight(''#FB911C'');
- },
- onDrag: function(el) {
- dragIndicatorEl.highlight(''#FB911C'');
- },
- onComplete: function(el) {
- completeEl.highlight(''#FB911C'');
- }
- });
- });
|
