javascript - Jquery UI 中的拖放事件

Question

我正在学习 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 中的标签，但有些文本未设置。

所以请帮助我，我知道我在这方面犯了愚蠢的错误，但我能够找到它。

非常感谢您的宝贵时间。

Answer 1

我不确定我是否正确理解了您的问题，但我希望这对您有所帮助。

如果愿意，您可以自始至终使用 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 学习的一些引用资料:

http://api.jquery.com/val/

http://api.jquery.com/text/

您始终可以引用这些文档以找到有关可用方法的更多信息。