Question

我有一个拖放数据颜色属性，你拖动一个颜色并将其放在所需的网格方格。但是，我想用图像做这件事，我对如何做到以及如何正确使用data-image-src =＆＃34;＆＃34;感到困惑。属性。

这样做的正确方法是什么？

这是我的HTML：

<div class="peg col-md-2" x-lvl-draggable="true" data-color="green">Green</div>
<div class="peg col-md-2" x-lvl-draggable="true" data-color="red">Red</div>
<div class="peg col-md-2" x-lvl-draggable="true" data-color="blue">Blue</div>
<div class="peg col-md-2" x-lvl-draggable="true" data-color="black">Black</div>
<div class="peg col-md-2" x-lvl-draggable="true" data-color="grey">Grey</div>

我的css：

.red {
    background: 
}

.blue {
    background-color: blue;
}
.green {
    background-color: green;
}

.black {
    background-color: black;
    color: white;
}

.grey {
    background-color: grey;
}

这是我的JS：

angular
            .module('ddApp', ['lvl.directives.dragdrop']) 
            .controller('ddController', ['$scope' , function($scope){ // function referenced by the drop target
                $scope.dropped = function(dragEl, dropEl) {

                    var drop = angular.element(dropEl);
                    var drag = angular.element(dragEl);

                    //clear the previously applied color, if it exists
                    var bgClass = drop.attr('data-color');
                    if (bgClass) {
                        drop.removeClass(bgClass);
                    }

                    //add the dragged color
                    bgClass = drag.attr("data-color");
                    drop.addClass(bgClass);
                    drop.attr('data-color', bgClass);

                    //if element has been dragged from the grid, clear dragged color
                    if (drag.attr("x-lvl-drop-target")) {
                        drag.removeClass(bgClass);
                    }
                }
            }]);

Answer 1

最简单的方法是使用background-image更改颜色类：url（“”）。因此，您的控制器会将此图像类分配给已删除的元素。

如果需要通过数据绑定定义大量图像源，可以在数据图像等属性上定义源图像，并将此数据图像值分配给丢弃的图像元素源。

使用数据属性进行拖放

1 个答案: