我正在尝试使用.draggable
类拖动数据并将其附加到另一个div。现在我正在使用警报在文件被删除时通知我。
但是如何获取要在任何可拖动事件中使用的每个draggable
内容的数据?
任何帮助都会有所帮助
示例使用文字附加信息 // http://jsfiddle.net/breezy/7psw1s4L/
这是我的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);
}
});
答案 0 :(得分:2)
您可以将html
(数据)存储在全局变量中。在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>