[英]How to grab draggable data and append to another div
I am trying to drag the data with the class of .draggable
and append it to another div.我正在尝试使用
.draggable
类拖动数据并将其附加到另一个 div。 Right now I am using an alert to notify me when the file is dropped.现在我正在使用警报在文件被删除时通知我。
But how do I grab the data of each draggable
content to be used in any of the draggable events?但是如何获取要在任何可拖动事件中使用的每个
draggable
内容的数据?
Any help would be helpful任何帮助都会有所帮助
example using text to append info // http://jsfiddle.net/breezy/7psw1s4L/使用文本附加信息的示例// http://jsfiddle.net/breezy/7psw1s4L/
Here is my jquery这是我的 jquery
jQuery.event.props.push('dataTransfer');
$('.draggable').on({
dragstart: function() {
$(this).css('opacity', '0.5');
},
dragleave: function() {
$(this).removeClass('over');
},
dragenter: function(e) {
$(this).addClass('over');
//e.preventDefault();
},
dragover: function(e) {
//$(this).addClass('over');
e.preventDefault();
},
dragend: function() {
$(this).css('opacity', '1');
},
//
drop: function() {
alert('drop');
$(this).append(dataTransfer);
}
});
You can store the html
(data) in a global variable.您可以将
html
(数据)存储在全局变量中。 In drop
you can use the html
as you wish.在
drop
您可以根据需要使用html
。
var data = ''; jQuery.event.props.push('dataTransfer'); $('.draggable').on({ // on commence le drag dragstart: function() { $(this).css('opacity', '0.5'); data = $(this).html(); }, // on quitte l'élément concerné par le drag dragleave: function() { $(this).removeClass('over'); }, // on passe sur un élément draggable dragenter: function(e) { $(this).addClass('over'); //e.preventDefault(); }, dragover: function(e) { //$(this).addClass('over'); e.preventDefault(); }, // on lâche l'élément, le drag est terminé dragend: function() { $(this).css('opacity', '1'); }, // drop: function(e) { console.log(e); alert('drop'); //$(this).append(dataTransfer); $(this).append(data); } });
/* Prevent the text contents of draggable elements from being selectable. */ [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } .draggable { height: 150px; width: 150px; float: left; border: 2px solid #666666; background-color: #ccc; margin-right: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 3px #000; box-shadow: inset 0 0 3px #000; text-align: center; cursor: move; } .column header { color: #fff; text-shadow: #000 0 1px; box-shadow: 5px; padding: 5px; background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); background: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(0,0,0)), color-stop(0.50, rgb(79,79,79)), color-stop(1, rgb(21,21,21))); border-bottom: 1px solid #ddd; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; } .column.over { border: 2px dashed #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="columns"> <div class="draggable" draggable="true"><header>A lot of info</header></div> <div class="draggable" draggable="true"><header>Some info</header></div> </div> <div class="draggable" draggable="true"><header>More info</header></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.