在Jquery UI中拖放事件

Question

我正在学习jQuery可拖放用户界面，因为我面临处理事件的问题，

这是我的代码

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/

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

Answer 2

 $(function() { $( "#draggable" ).draggable(); }); 

  #draggable { width: 150px; height: 150px; padding: 0.5em;cursor:move; } 

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> 

更多： https : //jqueryui.com/draggable/

Answer 3

尝试这个。 您可以使用javascript单独执行此操作。

 window.allowDrop = function(ev) { ev.preventDefault(); if (ev.target.getAttribute("draggable") == "true") ev.dataTransfer.dropEffect = "none"; // dropping is not allowed else ev.dataTransfer.dropEffect = "all"; // drop it like it's hot }; window.drag = function(ev) { ev.dataTransfer.setData("id", ev.target.id); }; window.drop = function(ev) { ev.preventDefault(); var id = ev.dataTransfer.getData("id"); var dragged = document.getElementById(id); //dragged ev.target.appendChild(dragged); c = dragged.childNodes; document.getElementById("l1").innerHTML = c[0].value; }; 

 #draggable { width: 100px; height: 100px; background: blue; } #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 125px; background: red; color: #fff; padding: 10px; } 

  <div id="droppable" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here <label id="l1"></label> </div> <div id="draggable" draggable="true" ondragstart="drag(event)"><input type="text" style="width: 90px;" id="t1"></div> 

Answer 4

此示例可以帮助您：

 function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } 

 .droptarget { float: left; width: 100px; height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } 

 <p>Drag and Drop Jquery example</p> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p id="example"></p>