Question

我希望能够将元素从一个div拖到另一个div中，保持原始位置并在第二个div中进行克隆。一旦克隆的元素在第二个div中，它仍然应该是可拖动的。

我已经实现了两次，一次使用普通的javascript，一次使用Angular JS中的指令。

在普通的javascript实现中，一切都按预期工作;可以再次拖动克隆的对象。

但是，在Angular JS实现中，无法拖动克隆的对象。我不确定为什么它不能保留可拖动的财产。

这是我的代码：

HTML

<!DOCTYPE html>

<head>
    <title>Drag and Drop Test</title>
    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Angular JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <!-- Jitsi External -->
    <script src="https://meet.jit.si/external_api.js"></script>
    <!-- Local JS -->
    <script type="text/javascript" src="../js/dragdrop.js"></script>
    <!-- Local CSS -->
    <link rel="stylesheet" href="../css/dragdrop.css">

</head>

<body ng-app="myApp">
    <div>
        <div class="dragdrop-panel" id="drag-from-div">
            <h1>Icons</h1>
            <div id="dragme" class="draggablewithjs" draggable="true" ondragstart="drag(event)">
            </div>
            <div id="dragme2" class="draggablewithangular" drag-item>
            </div>
        </div>
        <div class="dragdrop-panel" id="drop-to-div" drop-area>
            <h1>Selected</h1>
        </div>
        <div class="dragdrop-panel" id="trash-div" drop-area>
            <h1>Trash</h1>
        </div>
    </div>
</body>

的Javascript

var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope) {
});

app.directive("dropArea", function() {
return {
    link: function(scope,elem, attrs) {
        elem.bind('drop', function(ev){
            ev.preventDefault();
            var data;
            if (ev.dataTransfer) {
                data = ev.dataTransfer.getData('text');
            }
            else if (ev.originalEvent.dataTransfer){
                data = ev.originalEvent.dataTransfer.getData('text');
            }
            //var dropObj = document.getElementById(data).cloneNode();
            //dropObj.id = dropObj.id + "1";
            //dropObj.setAttribute('style', 'width:50px;height:50px;background:blue;');
            ev.target.appendChild(document.getElementById(data).cloneNode());
        });

        elem.bind('dragover', function(ev){
            ev.preventDefault();
            if (ev.target.getAttribute("draggable") == "true"){
                ev.originalEvent.dataTransfer.dropEffect = "none";
            }
            else{
                ev.originalEvent.dataTransfer.dropEffect = "all";
            }
        });

        elem.css({
            color: "blue"
        });
    }
}
});

app.directive('dragItem', function() {
return {
    restrict: 'A',
    replace: 'false',
    link: function(scope,elem,attrs){
        elem.bind('dragstart', function(ev){
            if (ev.dataTransfer) {
                ev.dataTransfer.setData("text", ev.target.id);
            }
            else if (ev.originalEvent.dataTransfer){
                ev.originalEvent.dataTransfer.setData("text", ev.target.id);
            }
        });
        elem.bind('dragover', function(ev){
            return true;
        });
        attrs.$set('draggable','true');
    }
    //draggable="true" ondragstart="drag(event)"
}
});

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).cloneNode(true));
}

和CSS

.dragdrop-panel {
width:25vw;
margin-right: 5vw;
height: 100vh;
border: 3px solid red;
float: left;
}

.draggablewithjs {
width:50px; 
height:50px;
background:blue;
}

.draggablewithangular {
width:50px; 
height:50px;
background:red;
}

克隆的可拖动元素不再可拖动

0 个答案: