javascript - How to make a div draggable even from a textarea within? - Stack Overflow

admin管理员组

文章数量:1287514

I'm trying to have a draggable div which can also be dragged from a textarea within it.

html:

<div id="divContainer">
    <textarea id="text"></textarea>
</div>

css:

#divContainer {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#text {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    background-color: green;
}

jquery:

$("#divContainer").draggable();

I can drag the div if I drag by clicking in the div area, but not if I click into the textarea area.

Is there a way to solve this ?

Here is the jsFiddle

I'm trying to have a draggable div which can also be dragged from a textarea within it.

html:

<div id="divContainer">
    <textarea id="text"></textarea>
</div>

css:

#divContainer {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#text {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    background-color: green;
}

jquery:

$("#divContainer").draggable();

I can drag the div if I drag by clicking in the div area, but not if I click into the textarea area.

Is there a way to solve this ?

Here is the jsFiddle

• javascript
• jquery

Share Improve this question Follow edited May 30, 2013 at 12:07 MirrorMirror asked May 30, 2013 at 12:02 MirrorMirrorMirrorMirror 18888 gold badges3737 silver badges7171 bronze badges 3

• @Francois Wahl I don't want to make the textarea draggable. I want the DIV to be also dragged if i drag it by clickin in the textarea. – MirrorMirror Commented May 30, 2013 at 12:06
• 1 Yes, that is exactly what I thought. I don't know how though. Maybe you need to attach to the textarea drag/mousedown/etc.. event(s). Though I assume this would be rather tricky, seeing that drag in an textarea assumes you want to highlight the text inside it. You could achieve this with a transparent overlay but then you would loose the textarea's default features. You might be better off to create a border or frame the user needs to use to drag the div. – Nope Commented May 30, 2013 at 12:09
• When a text area is clicked, the default action is to get focused. As Francois mentioned, you can use an overlay. So in that case, how the textarea will get focused? – Jithin Commented May 30, 2013 at 12:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Check Out this fiddle perfect for you

FIDDLE

Code:

HTML:

<div>
 <textarea name="ta" id="ta" cols="30" rows="10"></textarea>
</div>

CSS:

div {
 background-color:#aaa;
 padding: 4px;
 text-align: center;
 position:relative;
}

JS:

$('div').draggable({
 cancel: "ta",
 start: function (){
    $('#ta').focus();
 } ,
 stop: function (){
    $('#ta').focus();
 } 
});

You can use the cancel option, setting it to '', similar to this:

$("#divContainer").draggable({ cancel: '' });

---

DEMO - Using the cancel option

---

Though this works for dragging, it causes other issues.

You are now unable to click into the textarea itself as draggable takes over the event.
You would have to write some custom code now to work around this.

Using an overlay is also a problem to implement as you now have to deal with when to place it over the div and when not.

I would remend to leave the default functionality of any elements inside the draggable div as is instead of "hacking" around them.

---

Possible Alternative

---

A more user-friendly approach might be to add a frame-like border to the div or a header-like border at the top to enable to user to drag the div.

Using HTML similar to this:

<div id="divContainer">
    <div class="dragger"></div>
    <textarea id="text"></textarea>
</div>

Giving the dragger the following css:

.dragger {
    border: none;
    background-color: gray;
    height: 15px;
    width: 100%;
    display: block;
}

and updating your textarea css to not use absolute positioning but instead use margins to specify the 5px on the left and top.

#text {
    width: 50px;
    height: 50px;
    background-color: green;
    margin-top: 5px;
    margin-left: 5px;
}

You then can implement the handle option similar to this:

$("#divContainer").draggable({
    handle: '.dragger'
});

---

DEMO - Using a header to drag

---

I'm not sure if this is a solution you can use or not but it would be one option.

Hope this help:

Demo

JQuery:

$(document).ready(function(){
$('#move').css('top',$("#text").css('top'));

  $('#move').css('left', $("#text").css('left'));
  $("#divContainer").draggable();
  $("#move").draggable({drag:function(event,ui){
  $('#text').css('top',$("#move").css('top')); 
  $('#text').css('left', $("#move").css('left'));
  },grid:[1,1],stop:function(){
  $('#move').css('top',$("#text").css('top'));

  $('#move').css('left', $("#text").css('left'));

  }});

});

本文标签： javascriptHow to make a div draggable even from a textarea withinStack Overflow