我正在学习 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;
}
});
这里当可拖动的 div 下降时,我想将可拖动的文本框中的文本设置为可放置的 div 中的标签,但有些文本未设置。
所以请帮助我,我知道我在这方面犯了愚蠢的错误,但我能够找到它。
非常感谢您的宝贵时间。
最佳答案
我不确定我是否正确理解了您的问题,但我希望这对您有所帮助。
如果愿意,您可以自始至终使用 jQuery
。
element.val("");
设置元素的文本。
text = draggableText.val();
获取元素的文本。
droppableText.text(text);
设置标签的文本。
jsFiddle:https://jsfiddle.net/5mrz37wn/
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:
<div id="droppable">Drop here
<label id="l1"></label>
</div>
<div id="draggable">
<input id="t1" type="text" style="width: 90px;">
</div>
JavaScript:
var text;
var draggableText = $("#t1");
var droppableText = $("#l1");
$("#draggable").draggable({
revert: true,
stop: function() {
alert("over");
draggableText.val("");
}
});
$("#droppable").droppable({
drop: function() {
alert("dropped");
text = draggableText.val();
console.log(text);
droppableText.text(text);
}
});
jQuery
学习的一些引用资料:
您始终可以引用这些文档以找到有关可用方法的更多信息。
关于javascript - Jquery UI 中的拖放事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37695055/