[英]How to make a div draggable and contenteditable=“true”?
I have tried over and over but i just can seem to get the text to be editable and also draggable, because when i apply .draggable() the contenteditable="true" becomes "false". 我已经尝试了一遍又一遍,但是我似乎可以使文本变得可编辑和可拖动,因为当我应用.draggable()时,contenteditable =“ true”变为“ false”。
Javascript Java脚本
$(".note").keyup(function() {
$(this).css('height' , '100%');
});
HTML 的HTML
<div class="note" contenteditable="true">
<span id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="30" width="30" align="right" style="vertical-align: top; float: right"/>
</span>
</div>
CSS 的CSS
.note {
width: 280px;
height: 130px;
padding-top: 20px;
margin-top: 60px;
margin-left: 25px;
padding: 2;
word-break: break-word;
font-family: Note;
font-size: 20px;
background-image: url("images/stickynote.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
You can do this to make it so if you double click it will be editable, but single clicks will drag it. 您可以这样做,因此,如果双击它将是可编辑的,但是单击将拖动它。
$(".note").draggable()
.click(function() {
$(this).draggable( {disabled: false});
}).dblclick(function() {
$(this).draggable({ disabled: true });
});
Add this to the close buttons <img>
code will keep it in the top right of your container: 将其添加到关闭按钮<img>
代码会将其保留在容器的右上方:
position: relative;
top: -20px;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.