javascript - Draggable 不拖动

标签 javascript jquery html draggable

不知何故,我的可拖动对象不再拖入占位符。

我注意到它在 appendChild 上给出了一个错误在 drop()功能,但是当我在那里提醒时,我注意到它甚至没有那么远。

var people = ['Sinan', 'Babette', 'Thomas', 'Yannick', 'Nick'];
$.each(people, function(key, val) {
  $('#placeholders').append('<div class="dnd" data-id="' + val + '" ondrop="drop(event)" ondragover="testDiv(event, innerHTML)"></div>');
});

$('#seizeImg img').on('dragstart', function(event) {
  drag(event);
});

function testDiv(ev, x) {
  if (x.length > 0) {
    return false;
  } else {
    allowDrop(ev);
    return true;
  }
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));

  var complete = false;
  $.each('#seizeImg img', function(key, val) {
    alert(key);
  });
}
.dnd {
  display: inline-block;
  vertical-align: top;
  width: 10%;
  height: 160px;
  padding: 10px;
  border: 2px solid #B7E6E6;
  background: rgba(51, 255, 102, 0.2);
}

#seizeImg img {
  width: 10%;
  height: 160px;
}

div.label {
  height: 25px;
  text-align: center;
  border: none;
  background: none;
}

div.buf {
  background: rgba(255, 0, 0, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="placeholders">
</div>
<br>
<br>
<div id="seizeImg">
  <img id="Babette" src="img/Babette.jpg" draggable="true" ondrop="drop(event)" width="186" height="186">
  <img id="Thomas" src="img/Thomas.jpg" draggable="true" ondrop="drop(event)" width="186" height="186">
  <img id="Yannick" src="img/Yannick.jpg" draggable="true" ondrop="drop(event)" width="186" height="186">
  <img id="Sinan" src="img/Sinan.jpg" ondrop="drop(event)" draggable="true" ondrop="drop(event)" width="186" height="186">
  <img id="Nick" src="img/Nick.jpg" ondrop="drop(event)" draggable="true" ondrop="drop(event)" width="186" height="186">
</div>

最佳答案

我假设您使用 jqueryUI 并安装了拖放库。如果你不是,那可能会让你的事情变得更容易一些。

你可以让它工作:

$('#seizeImg img').draggable(); 

如果你想要 drop 来保存数据,你所要做的就是:
 $('#placeholders').droppable({
accept: $('#seizeImg img'),
drop: function(){
//enter code here to take place whenever you drop something on it
// if you want to take a value from the object you are dropping on
// the droppable object just use:
var varID = (ui.draggable.attr("value");
    }
});

它更简洁一点,jqueryUI 消除了很多猜测工作。

编辑:
除非您没有在顶部包含代码,否则您永远不会调用实际的 jqueryUI 可拖动函数。周围的某个地方
  $(document).ready({function(){   
     // you have to include 
$('seizeImg img').draggable({function(){ 
    //add some more moving parts here if you need to
    });   
 } 

只是在 HTML 中设置 draggable='true' 是不一样的。

关于javascript - Draggable 不拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44069824/

相关文章:

javascript - 如何在Kendo UI折线图上将时间标记为“hh:mm:ss”

javascript - mootools 注入(inject)功能

javascript - 在 Wordpress 中使用 Visual Composer;原始 js 未应用于我的原始 html

jquery - 从输入元素获取“id”的最佳方法,如果知道它的“名称”

javascript - 在JavaScript中附加元素时出现奇怪的错误

javascript - 在我的页面刷新之前,Google Maps API 并不总是加载

html - HTML默认图片大小

javascript - 如何使用 JavaScript 单击表格内的 anchor 标记

javascript - 如何使用 JavaScript 动态更改 CSS Bootstrap 样式?

javascript - jQuery将HTML代码添加到页面