2

動的に作成されたjqueryのドラッグ可能なdivがあり、その中にネストされたjqueryのサイズ変更可能なdivがあります。

サイズ変更可能な div 内には、内部にテキストを含むネストされたスパンがあります。

div をドラッグしてサイズを変更できます。

スパン内のテキストを選択できるようにしたいのですが、親の div によってブロックされています。

テキストをクリックしてアラートを呼び出すことはできますが、テキストを強調表示することはできません。

明らかな何かが欠けていますか？

jsfiddle を作成したので、動作を確認できます。

ボックスのサイズを変更してドラッグすることができ、テキストをクリックするとアラートが表示されますが、テキストを選択することはできません

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

私は髪を引き裂いているので、どんな助けも大歓迎です

コードの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>
4

2 に答える 2

2

わかりましたデフォルトを妨げないでください（それは結局あなたが選択する必要があるものです）そしてクリックの代わりにマウスダウンを処理します（私は正しかった、クリックは遅すぎます）：

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

また、ドラッグ可能な div から継承するカーソル スタイルをリセットすると、準備完了です。

参照: http://jsfiddle.net/ARc7G/31/

于 2013-05-14T08:26:42.113 に答える
0

をご覧ください

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

最後に追加したのは

$("#span"+i).css('color','red');
于 2013-05-14T08:19:19.050 に答える