如何抓取可拖动数据并附加到另一个 div

Question

我正在尝试使用 .draggable 的 class 拖动数据并将其附加到另一个 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);
            }
        });

Answer 1

您可以将 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>

如何抓取可拖动数据并附加到另一个 div

How to grab draggable data and append to another div

html

javascript

jquery

droppable

draggable