原始代码

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>

更新

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

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

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;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col" id="col1">
  <div class="thing" draggable="true" ondragstart="drag(event)" id="thing1">THING 1</div>
  <div class="thing" draggable="true" ondragstart="drag(event)" id="thing2">THING 2</div>  
  <div class="thing" draggable="true" ondragstart="drag(event)" id="thing3">THING 3</div>  
  <div class="thing" draggable="true" ondragstart="drag(event)" id="thing4">THING 4</div>
</div>
<div class="col" id="col2" ondrop="drop(event)" ondragover="allowDrop(event)">

</div>

Answer 1

这是一种纯JavaScript方式，用于在窗口周围拖动动态创建的div。

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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');
    });
});

请注意，此代码之前已实现，允许在可拖动的容器中拖动！

使用纯javascript

更新

2 个答案:

原始代码

修复