使用纯 javascript 再次拖放和拖动

Question

我正在尝试从一列到另一列进行简单的拖放。我正在复制元素，以便右侧的列表可以有左侧元素的多个版本。别担心，我在实际追加之前设置了唯一 ID。

但是我也希望用户能够拖出框来删除相同的对象。但是一旦 DIV 放置到位（即一旦它在第 2 列中），就不能再次拖动它。最初的拖放工作正常。

我找到了处理 jQuery ui 的解决方案。我正在构建一个 angularJS 应用程序，并且对使用完整的 jQuery 或任何其他插件都不感兴趣。

帮助！

示例代码：

<div id="column1">    
    <div class="dragme" draggable="true" ondragstart="drag(event)">Item1</div>   
    <div class="dragme" draggable="true" ondragstart="drag(event)">Item1</div>
</div>

<div id="column2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<script>
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");
    var newEl = $(document.getElementById(data)).clone()[0];
    newEl.id = newEl.id + (+new Date());
    ev.target.appendChild(newEl);
}
</script>

更新

似乎不是拖放导致了问题。任何动态添加的内容都不会拖动。我在控制台中对此进行了测试。

仅供参考......下面的代码在这里工作得很好，问题最终是我的拖/放是在一个可拖动的容器内。

<div id="column1">    
    <div class="dragme" draggable="true" ondragstart="drag(event)">Item1</div>   
    <div class="dragme" draggable="true" ondragstart="drag(event)">Item1</div>
</div>

<div id="column2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<script>
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");
    var newEl = $(document.getElementById(data)).clone()[0];
    newEl.id = newEl.id + (+new Date());
    ev.target.appendChild(newEl);
}
</script>

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");
  var origThing = document.getElementById(data);
  var newThing = origThing.cloneNode(true);
    ev.target.appendChild(newThing);
}

.thing {
  width: 100px;
  height: 2em;
  padding: 0.5em;
  margin: 0.5em;
  background: rgba(0,0,0,0.8);
  color: white;
  font-family: sans-serif;
 }
.col {
  width: 130px;
  height: 450px;
  padding: 1em;
  border: 1px solid;
  border-radius: 5px;
  position: relative;
  float: left;
  }

Answer 1

这是在窗口周围拖动动态创建的 div 的纯 JavaScript 方式。

var divs=[];
var draggingIndex;
var isDown=false;
var startX,startY;

// add some divs dynamically
addDiv(50,50,100,75,'blue','batch1');
addDiv(250,50,50,38,'green','batch1');

// listen to mouse events
window.onmousedown=(function(e){handleMouseDown(e);});
window.onmousemove=(function(e){handleMouseMove(e);});
window.onmouseup=(function(e){handleMouseUp(e);});


function addDiv(x,y,w,h,bk,classname){
    var div=document.createElement('div');
    div.style.width=w+'px';
    div.style.height=h+'px';
    div.className=classname;
    div.style.position='absolute';
    div.style.left=x+'px';
    div.style.top=y+'px';
    div.style.background=bk;
    divs.push({div:div,w:w,h:h});
    document.body.appendChild(div);
}


function handleMouseDown(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // get mouse position
    startX=parseInt(e.clientX);
    startY=parseInt(e.clientY);
    // Is any div under the mouse?
    draggingIndex=undefined;
    for(var i=0;i<divs.length;i++){
        var d=divs[i];
        var x=parseInt(d.div.style.left);
        var y=parseInt(d.div.style.top);
        if(startX>x && startX<x+d.w && startY>y && startY<y+d.h){
            draggingIndex=i;
            isDown=true;
            break;
        }
    }
}

function handleMouseUp(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    isDown=false;
}

function handleMouseMove(e){
    if(!isDown){return;}
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // get mouse position
    mouseX=parseInt(e.clientX);
    mouseY=parseInt(e.clientY);
    // move the dragging div by the distance the mouse has moved
    var dragging=divs[draggingIndex].div;
    var dx=mouseX-startX;
    var dy=mouseY-startY;
    startX=mouseX;
    startY=mouseY;
    dragging.style.left=(parseInt(dragging.style.left)+dx)+'px';
    dragging.style.top=(parseInt(dragging.style.top)+dy)+'px';
}

body{ background-color: ivory; }
.batch1{border:1px solid red; }

Answer 2

所以，问题就如问题一样简单。我的可拖动项目是我使用draggable =“true”设置的自定义指令，并使用像ondrop =“drop（event）”这样的内联绑定。所以，我没有意识到在其他地方，有一些非常有用的代码没有使用委托，也就是仅绑定在初始加载上。这个小警告会影响任何动态加载的 DOM 元素！

原始代码

$(document).ready(function() {
    $('.dragme').on('mousedown', function(e) {
        // disable swiper when user clicks on drawer
        $(this).parents('.swiper-wrapper').addClass('no-swiping');
    });
    $('.dragme').on('mouseup dragend',  function(e) {
        // re-enable when user is done
        $(this).parents('.swiper-wrapper').removeClass('no-swiping');
    });    
});

修复

$(document).ready(function() {
    $(document).on('mousedown', '.dragme', function(e) {
        // disable swiper when user clicks on drawer
        $(this).parents('.swiper-wrapper').addClass('no-swiping');
    });
    $(document).on('mouseup dragend', '.dragme', function(e) {
        // re-enable when user is done
        $(this).parents('.swiper-wrapper').removeClass('no-swiping');
    });
});

请注意，此代码是较早实现的，以允许在可拖动容器中拖动！