拖放事件

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; 
} 
}); 

在這裏，當draggable 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); 
    } 
}); 

您一些參考文獻10研究：

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>