我学习在处理事件的,我面临的问题jQuery的可拖动和投掷的UI,拖放事件
这里是我的代码
CSS:
#draggable
{
width: 100px;
height: 100px;
background: blue;
}
#droppable
{
position: absolute;
left: 250px;
top: 0;
width: 125px;
height: 125px;
background: red;
color: #fff;
padding: 10px;
}
HTML:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<div id="droppable">Drop here
<label id="l1"></label>
</div>
<div id="draggable"><input type="text" style="width: 90px;" id="t1"></div>
的javascript:
var text;
$("#draggable").draggable({
revert: true ,
stop: function(){
alert("over");
document.getElementById('t1').value = "";
}
});
$("#droppable").droppable({
drop: function() {
alert("dropped");
text = document.getElementById('t1').value;
console.log(text);
document.getElementById('l1').innerHTML = text;
}
});
在这里,当draggable div下降,我想设置在可拖动的文本框中的文本标签,而不是设置文本。
所以请帮助我这个,我知道我在这做了愚蠢的错误,但我能够找到它。
非常感谢你的时间。
你的答案是me.When一个拖放非常有帮助完成,而当另一个被启动以前的文本被删除,如果我想要添加文本和其他文本应该如何做? @Dar –
@RaviVasani你的目标是(1)添加另一个标签来显示文本或(2)追加到文本?两者之间的区别在于,在(1)中,您将在'droppable' div内创建一个新元素(新'label')。在(2)中,您只需编辑'droppable' div中现有'label'的'text'。 – dariru
这很有帮助。谢谢@达尔 –