Question

我正在尝试这样做：

当用户将新卡拖到主板时，javascript克隆默认卡。现在，我希望能够将此卡和移动（不是克隆）拖到其他部分。

现在我有了这个：的拖

boardApp.directive('draggable',function(){
return function(scope,elem){
    var el = elem[0];
    el.draggable=true;
    el.addEventListener('dragstart',function(event){
        console.log(this.classList);
        if(this.classList.contains("drag")){
            event.dataTransfer.setData('movePostIt',this.id);
        }else{
            event.dataTransfer.setData('postIt',this.id);
        }
        event.dataTransfer.effectAllowed = 'copy';
        this.classList.add('drag');
        return false;
    },false);
    el.addEventListener('dragend',function(event){
        this.classList.remove('drag');
        return false;
    },false);
};
});

和放弃

boardApp.directive('droppable',function(){
return function(scope,elem){
    var el = elem[0];
    el.addEventListener('dragover',function(event){
        event.dataTransfer.effectAllowed = 'copy';
        if(event.preventDefault) event.preventDefault();
        this.classList.add('over');
        return false;
    },false);
    el.addEventListener('dragenter',function(event){
        this.classList.add('over');
        return false;
    },false);
    el.addEventListener('dragleave',function(event){
        this.classList.remove('over');
        return false;
    },false);
    el.addEventListener('drop',function(event){
        if (event.stopPropagation) event.stopPropagation();
        this.classList.remove('over');
        var id = event.dataTransfer.getData("postIt");
        console.log(id);
        var item = document.getElementById(id).cloneNode(true);
        item.classList.remove('drag');
        console.log(item.className);
        item.removeAttribute("style");

        this.appendChild(item.cloneNode(true));
        return false;
    },false);

};
});

但是，当我克隆此卡时，我也会复制draggable属性，但此卡不可拖动。

你对发生的事情有任何想法吗？有解决方案吗谢谢。

修改
这是我的应用程序的链接的 https://hidden-everglades-8767.herokuapp.com/board/#/545bb3e9b36a067516000001

拖放javascript动态元素

0 个答案: