Forums

Hi
When i drag and drop the input text box the focus is not gained or it is not editable upon mouse click in firefox.
In regards to this i wrote a function to set the focus but then once i drag the textbox it is still not gaining the Focus.

Hi
When i drag the textbox the mouse focus is not happening upon click but when i drag the other one then previous one gets the focus upon mousedown(click).



<input type="text" name="property-primary" id="createCustomSearch-<%= searchCategoryId %>-property-<%= searchPropertyId %>-field" class="field textField"

onclick="gainFocus('createCustomSearch-<%= searchCategoryId %>-property-<%= searchPropertyId %>-field');" />

<input type="text" name="property-<%= searchPropertyTypeId %>" id="createCustomSearch-<%= searchCategoryId %>-property-<%= searchPropertyTypeId %>-field"
onclick="gainFocus('createCustomSearch-<%= searchCategoryId %>-property-<%= searchPropertyTypeId %>-field');" />



function gainFocus(x){

document.getElementById(x).focus();
}

DragDrop.js:-----------
/**
* Internal function to handle the mousemove event. Will be invoked
* from the context of the html element.
*
* @TODO figure out what we can do about mouse events lost when the
* user drags objects beyond the window boundary. Currently we can
* detect this in internet explorer by verifying that the mouse is
* down during the mousemove event. Firefox doesn't give us the
* button state on the mousemove event.
* @method handleMouseMove
* @param {Event} e the event
* @private
* @static
*/
handleMouseMove: function(e) {

var dc = this.dragCurrent;
if (dc) {

// var button = e.which || e.button;

// check for IE mouseup outside of page boundary
if (YAHOO.util.Event.isIE && !e.button) {
alert("Inside IE Check")
this.stopEvent(e);
return this.handleMouseUp(e);
}

if (!this.dragThreshMet) {
var diffX = Math.abs(this.startX - YAHOO.util.Event.getPageX(e));
var diffY = Math.abs(this.startY - YAHOO.util.Event.getPageY(e));
if (diffX > this.clickPixelThresh ||
diffY > this.clickPixelThresh) {
this.startDrag(this.startX, this.startY);
}
}

if (this.dragThreshMet) {
dc.b4Drag(e);
if (dc) {
dc.onDrag(e);
}
if (dc) {
this.fireEvents(e, false);
}
}

this.stopEvent(e);
}
},

Have you tried the 3.1pr ?

I took the example at http://developer.yahoo.com/yui/3/examples/dd/list-drag_clean.html and replaced the inner html of all the lists item with an input box.



It almost works.

Click on the input box in blue #1. Type "hello." Move blue #1 into the yellow list. Attempt to type in the input box in blue #1 but cannot. Move yellow #1. Successfully type "world" in input box in blue #1.

It still doesn't release the focus correctly. I need to move something else before I can type in this box again. That's not user friendly at all. Is there a way I can cheat and make the browser think that something else was dragged instead? Maybe by adding something into the Y.DD.DDM.on(drag:drophit ) function?

Great hack, I think this hack is useful for my page.

thanks