Question

我试图在不使用jQuery UI的情况下制作可拖动和可拖放的东西，但我似乎无法找到任何没有使用过UI的人。如果不使用UI，你们是否知道有任何方法可以实现这一目标？

回答了我自己的问题：

$('#div2').on('dragover', function(event){
  event.preventDefault();
  event.stopPropagation();
});
$('#drag1').on('dragleave', function(event){
  event.preventDefault();
  event.stopPropagation();
});
$("#div2").on('drop', function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $('#popup').fadeIn(500).fadeOut(500); 
});
$('#div3').on('dragover', function(event){
  event.preventDefault();
  event.stopPropagation();
});
$("#div3").on('drop', function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $('#popup-cart').fadeIn(500).fadeOut(500); 
});

Answer 1

这是不合理的。它可能在React或Angular之类的东西上很好，但是使用简单的jQuery ......玩得开心！

但严肃地说，你必须处理向下点击，当点击停止时，处理鼠标拖动，并将top: x和left: y值设置为鼠标位置。然后停止拖动鼠标单击。就像我说的，在React中更容易，你得到states并且可以快速轻松地重新呈现奇异组件。

Answer 2

html5中有拖放支持 - https://www.w3schools.com/html/html5_draganddrop.asp

所以你可以在没有jq UI的情况下将它与jquery一起使用

Answer 3

看看我前几天发现的Codepen提交。

我并没有深入研究它，但你可以从事件和定位中获取灵感。

Codepen

//Add Event Listener
function adding()
{
    dragme.addEventListener('mousedown',mousedown,false);
    body.addEventListener('mouseup',mouseup,false);
}

所以我不会在没有代码的情况下发布codepen链接，所以这里是som eventlisteners的随机片段。

Answer 4

回答了我自己的问题：

$('#div2').on('dragover', function(event){
  event.preventDefault();
  event.stopPropagation();
});
$('#drag1').on('dragleave', function(event){
  event.preventDefault();
  event.stopPropagation();
});
$("#div2").on('drop', function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $('#popup').fadeIn(500).fadeOut(500); 
});
$('#div3').on('dragover', function(event){
  event.preventDefault();
  event.stopPropagation();
});
$("#div3").on('drop', function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $('#popup-cart').fadeIn(500).fadeOut(500); 
});

有没有一个很好的方法来通过使用jQuery而不使用jQuery UI来制作可拖动和可放置的对象？

4 个答案: