使用数据属性拖放

我有一个带有数据颜色属性的拖放，您将一种颜色拖放到所需的网格正方形上。但是，我想用图像来做到这一点，我对如何做到这一点以及如何正确使用 data-image-src=" 属性有点困惑。

正确的方法是什么？

这是我的 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);
                    }
                }
            }]);