CODEWITHSUNDEEP
javascripthtmlinputdrag
Opoe
Opoe

Reputation: 1387

Drag and drop disables input textfield! Help me?

i have a input textfield within a container. This container is draggable, but now i cant input text into the textfield anymore. Probably because you have to click inside the textfield to type, and now mouse down means drag!

Or maybe its something completly different

Does anyone know how i can solve this? Thanks in advance

you can check the code out here, but its pretty much.. http://www.jsfiddle.net/AVG5a/

Upvotes: 2

Views: 4335

Answers (2)

user492203
user492203

Reputation:

Use jQuery [docs] and jQuery UI [docs]. I'm almost done with converting to jQuery, I'll post a jsFiddle link when I finish it.

Here you go: http://jsfiddle.net/pswRh/

After you learn jQuery and jQuery UI, it's very easy to make an element draggable, and – optionally – disable dragging it with a specified child element.

HTML

<div id='myDiv'>
    <img src='http://dummyimage.com/100x100.png' id='pic' />
    <input id='textInput' />
</div>

CSS (optional)

#myDiv {
    width: 150px;
    height: 200px;
    border: 1px solid;
    background: blue;
    color: white;
}

JavaScript

$('#myDiv').draggable({
    cancel: '#textInput'
});

And voila! You've just made a draggable div, but you can still type in the input field, since it won't drag the element.

Alternatively, you can specify a handle. That way, you can only drag the div with the specified child.

HTML, CSS

same as previous

JavaScript

$('#myDiv').draggable({
  handle: '#pic'
});

Specify multiple elements separated by a comma (i.e. '#el1, #el2, #el3').

Upvotes: 1

thejh
thejh

Reputation: 45568

Add this to appendFunction:

document.getElementById("inputId0").addEventListener("mousedown", function(e) {
    e.stopPropagation();
}, false);

This will cancel mousedown events for the element with id inputId0.

Upvotes: 3

Related Questions