Author: abelevich Date: 2010-12-01 12:28:01 -0500 (Wed, 01 Dec 2010) New Revision: 20274 Modified: sandbox/trunk/ui/drag-drop/ui/src/main/resources/META-INF/resources/org.richfaces/dnd-draggable.js sandbox/trunk/ui/drag-drop/ui/src/main/resources/META-INF/resources/org.richfaces/dnd-droppable.js Log: fix issue with custom drag indicatror position Modified: sandbox/trunk/ui/drag-drop/ui/src/main/resources/META-INF/resources/org.richfaces/dnd-draggable.js =================================================================== --- sandbox/trunk/ui/drag-drop/ui/src/main/resources/META-INF/resources/org.richfaces/dnd-draggable.js 2010-12-01 17:16:00 UTC (rev 20273) +++ sandbox/trunk/ui/drag-drop/ui/src/main/resources/META-INF/resources/org.richfaces/dnd-draggable.js 2010-12-01 17:28:01 UTC (rev 20274) @@ -4,16 +4,19 @@ rf.ui.Draggable = function(id, options) { this.dragElement = $(document.getElementById(id)); - this.dragElement.draggable({addClasses: false, appendTo: 'body'}); + this.dragElement.draggable(); if(options.indicator) { var element = document.getElementById(options.indicator); - this.indicator = rf.$(options.indicator); + this.dragElement.data("indicator", true); this.dragElement.draggable("option", "helper", function(){return element}); } else { + this.dragElement.data("indicator", false); this.dragElement.draggable("option", "helper", 'clone'); } + this.dragElement.draggable("option", "addClasses", false); + this.options = options; this.dragElement.data('type', this.options.type); @@ -30,30 +33,38 @@ $.extend(rf.ui.Draggable.prototype, ( function () { return { dragStart: function(e, ui) { - if(ui.helper) { - var element = ui.helper[0]; - this.parentElement = element.parentNode; - ui.helper.detach().appendTo("body"); - ui.helper.setPosition(e).show(); - } + var element = ui.helper[0]; + this.parentElement = element.parentNode; + ui.helper.detach().appendTo("body").setPosition(e).show(); + + if(this.__isCustomDragIndicator()) { + // move cursor to the center of custom dragIndicator; + var left = (ui.helper.width()/2); + var top = (ui.helper.height()/2); + this.dragElement.data('draggable').offset.click.left = left; + this.dragElement.data('draggable').offset.click.top = top; + } }, drag: function(e, ui) { - var helper = ui.helper; - if(this.indicator) { - helper.addClass(this.indicator.draggingClass()); + if(this.__isCustomDragIndicator()) { + var indicator = rf.$(this.options.indicator); + if(indicator) { + ui.helper.addClass(indicator.draggingClass()); + } } }, dragStop: function(e, ui){ - if(ui.helper) { - ui.helper.hide(); - ui.helper.detach().appendTo(this.parentElement); - if(ui.helper[0] != this.dragElement[0]) { + ui.helper.hide().detach().appendTo(this.parentElement); + if(ui.helper[0] != this.dragElement[0]) { //fix to prevent remove custom indicator from DOM tree. see jQuery draggable._clear method for details - ui.helper[0] = this.dragElement[0]; - } + ui.helper[0] = this.dragElement[0]; } + }, + + __isCustomDragIndicator: function() { + return this.dragElement.data("indicator"); } } })()); Modified: sandbox/trunk/ui/drag-drop/ui/src/main/resources/META-INF/resources/org.richfaces/dnd-droppable.js =================================================================== --- sandbox/trunk/ui/drag-drop/ui/src/main/resources/META-INF/resources/org.richfaces/dnd-droppable.js 2010-12-01 17:16:00 UTC (rev 20273) +++ sandbox/trunk/ui/drag-drop/ui/src/main/resources/META-INF/resources/org.richfaces/dnd-droppable.js 2010-12-01 17:28:01 UTC (rev 20274) @@ -17,38 +17,36 @@ return { drop: function(e, ui) { if(this.accept(ui.draggable)) { - var helper = ui.helper; - var indicator = rf.$(helper.attr("id")); - if(indicator) { - helper.removeClass(indicator.acceptClass()); - helper.removeClass(indicator.rejectClass()); - } this.__callAjax(e, ui); } + + var dragIndicatorObj = rf.$(ui.helper.attr("id")); + if(dragIndicatorObj) { + ui.helper.removeClass(dragIndicatorObj.acceptClass()); + ui.helper.removeClass(dragIndicatorObj.rejectClass()); + } }, dropover: function(event, ui) { var draggable = ui.draggable; - var helper = ui.helper; - var indicator = rf.$(helper.attr("id")); - if(indicator) { + var dragIndicatorObj = rf.$(ui.helper.attr("id")); + if(dragIndicatorObj) { if(this.accept(draggable)) { - helper.removeClass(indicator.rejectClass()); - helper.addClass(indicator.acceptClass()); + ui.helper.removeClass(dragIndicatorObj.rejectClass()); + ui.helper.addClass(dragIndicatorObj.acceptClass()); } else { - helper.removeClass(indicator.acceptClass()); - helper.addClass(indicator.rejectClass()); + ui.helper.removeClass(dragIndicatorObj.acceptClass()); + ui.helper.addClass(dragIndicatorObj.rejectClass()); } } }, dropout: function(event, ui) { var draggable = ui.draggable; - var helper = ui.helper; - var indicator = rf.$(helper.attr("id")); - if(indicator) { - helper.removeClass(indicator.acceptClass()); - helper.removeClass(indicator.rejectClass()); + var dragIndicatorObj = rf.$(ui.helper.attr("id")); + if(dragIndicatorObj) { + ui.helper.removeClass(dragIndicatorObj.acceptClass()); + ui.helper.removeClass(dragIndicatorObj.rejectClass()); } },