Question

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/

Answer 1

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').