javascript动态文本区和nicedit
在这里的几个人的大力帮助下，我成功地创建了一个页面，可以动态地创建可调整大小/可拖动的文本区域。我现在正试图将nicedit整合到这些文本区域中。它在一定程度上起作用了。双击文本区域后，文本区域将变为nicedit区域，但不幸的是，draggable事件甚至覆盖了nicedit，因此我无法编辑文本区域 我的javascript是有限的，所以我希望有人能指出我的错误 提前谢谢 这里是jsfiddle链接 这是密码javascript动态文本区和nicedit,javascript,html,onclicklistener,nicedit,Javascript,Html,Onclicklistener,Nicedit,在这里的几个人的大力帮助下，我成功地创建了一个页面，可以动态地创建可调整大小/可拖动的文本区域。我现在正试图将nicedit整合到这些文本区域中。它在一定程度上起作用了。双击文本区域后，文本区域将变为nicedit区域，但不幸的是，draggable事件甚至覆盖了nicedit，因此我无法编辑文本区域 我的javascript是有限的，所以我希望有人能指出我的错误 提前谢谢 这里是jsfiddle链接 这是密码 <!DOCTYPE html> <html> <hea
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src = "http://js.nicedit.com/nicEdit-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
window.onload = function () {
var body = document.body;
// The magic
body.addEventListener ("dblclick", function (event) {
var target = event.target;
if (target.nodeName === "TEXTAREA") {
var area = new nicEditor ({fullPanel : true}).panelInstance (target);
area.addEvent ("blur", function () {
this.removeInstance (target);
});
}
}, false);
}
var i=0;
var p=25;
function creatediv1(id)
{
id=id+i;
var xp=xp+i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('iterate',i);
newdiv.style.position = "relative";
newdiv.style.top = p;
newdiv.style.left = p;
newdiv.style.cursor='move';
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i +"]' class='textarea1' width='300' style='position:absolute; top:0px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";
document.getElementById("frmMain").appendChild(newdiv);
$(function()
{
$("#"+i).resizable(
{
stop: function(event, ui)
{
var width = ui.size.width;
var height = ui.size.height;
// alert("width="+width+"height="+height);
ValProportions(width,height,ui.element.context.id);
}
});
$( "#"+id ).draggable(
{
stop: function(event, ui)
{
Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
// alert("left="+Stoppos.left+"top="+Stoppos.top);
ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate'));
}
});
$("#"+i).draggable({handle:"#handle"});
});
function ValProportions(defaultwidth, defaultheight,id) {
$('#width'+id).val(defaultwidth);
$('#height'+id).val(defaultheight);
}
function ValPostion(defaultleft,defaulttop,id) {
$('#left'+id).val(defaultleft);
$('#top'+id).val(defaulttop);
}
i++;
p=p+25;
}
</script>
<style>
textarea {
height: 100px;
margin-bottom: 20px;
width: 1000px;
}
</style>
</head>
<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="test.php" method="post">
<input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />
<input type="submit" value="Submit" >
</form>
</body>
我通过在div的mousedown事件上使用stoppropagation解决了这个问题，这使我能够编辑文本，而不必使用draggable覆盖编辑函数尝试将其放在一个屏幕上，以便人们可以更快地帮助您。好的，在上面的文本中添加了jsfiddle链接，感谢我不知道jsfiddle