CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Barry Watts
Barry Watts

Reputation: 794

outer jquery draggable/resizable div's not allowing me to select text of inner span

I have a dynamically created jquery draggable div, that has a nested jquery resizable div within it.

Inside the resizable div I have a nested span with some text inside.

I can drag the div about and resize it.

I want to be able to select the text within the span but the parent divs are blocking me from doing it.

I can click on the text and call an alert but still cannot highlight the text.

Am I missing something obvious?

I have created a jsfiddle so you can see it in action.

you can resize and drag the box around and if you click on the text you get an alert, but cannot select the text

http://jsfiddle.net/ARc7G/28/

any help greatly appreciated as I am tearing my hair out

heres the code javascript

  function createtextbox(i, id, top, left, width, height, content,zindex,borderwidth,borderstyle,bordercolor,padding) {
id = id + i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('iterate', i);
newdiv.style.position = "absolute";
newdiv.style.top = top + "px";
newdiv.style.left = left + "px";
newdiv.style.borderWidth = "1px";
newdiv.style.cursor = 'move';
newdiv.style.zIndex = zindex;
newdiv.innerHTML = "</div><br><div id='div" + i + "' name='textarea[" + i + "]'  class='textarea1' style='padding:"+padding+"px; border-width:"+borderwidth+"px; border-style:"+borderstyle+";  border-color:"+bordercolor+"; width:"+width+"px; height:"+height+"px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;'><span id='span" + i + "'>" + content + "</span></div>";
var htmlData = $('#' + i).html();
newdiv.innerHTML = newdiv.innerHTML + "<br><input name='contents[" + i + "]' type='hidden' value='" + content + "'/>";
newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='" + i + "' name='id[" + i + "]'><br><input name='box_type[" + i + "]' type='hidden' value='text'/>";
newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='" + width + "' name='width[" + i + "]' id='width" + i + "'><br><input type='hidden' value='" + height + "' name='height[" + i + "]' id='height" + i + "'>";
newdiv.innerHTML = newdiv.innerHTML + "<br><input type='hidden' value='" + left + "' name='left[" + i + "]' id='left" + i + "'><br><input type='hidden' value='" + top + "' name='top[" + i + "]' id='top" + i + "'>";
document.getElementById("frmMain").appendChild(newdiv);

var top_button_left_pos = -75;
var spanclick = document.getElementById('span' + i);
spanclick.onclick = function (e) {       
    alert("hello world");
};


$(function () {
    $("#div" + i).resizable({
        autoHide: true
    });
    $("#div" + i).resizable({           
    });

    $("#" + id).draggable({           
    });
});
}


createtextbox('1', 'draggable', '15', '15', '300', '300', 'newtextarea','1','1','solid','#000000','3');

html

 <form id="frmMain" name="frmMain" enctype="multipart/form-data" method="post">
  <div id="content"></div>
 </form>

Upvotes: 2

Views: 1192

Answers (2)

Damyan Petev
Damyan Petev

Reputation: 1635

Ok don't prevent the default (that is what you need to select after all) and handle mouse down instead of click (I was right, the click fires too late):

spanclick.onmousedown = function (e) {
    e.stopPropagation();
};

Also reset the cursor style it inherits from the draggable div and you are good to go.

See: http://jsfiddle.net/ARc7G/31/

Upvotes: 2

vinothini
vinothini

Reputation: 2604

Please have a look at

http://jsfiddle.net/ARc7G/29/

At the final, I added

$("#span"+i).css('color','red');

Upvotes: 0

Related Questions