[英]Drag and drop events in Jquery UI
我正在學習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中的標簽,但是有些文本沒有設置。
因此,請幫助我,我知道我在這個方面犯了愚蠢的錯誤,但是我能夠找到它。
非常感謝您的參與。
我不確定我是否理解您的正確要求,但希望對您有所幫助。
您可以根據需要使用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
學習的一些參考資料:
您始終可以參考這些文檔以找到有關可用方法的更多信息。
$(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>
嘗試這個。 您可以使用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>
此示例可以幫助您:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.