Javascript 如何使用angularJS突出显示可拖动元素下的放置区域？

当拖动的元素位于拖放区域上方时，我在突出显示拖放区域（使用dropZone指令定义）时遇到问题

我尝试过使用CSS：

.highlight {
    background-color: rgba(0, 255, 0, 0.2);
}
.highlight:hover {
    background-color: rgba(0, 255, 0, 0.5);
}

但这不起作用，因为我正在拖动一个元素，所以

悬停

位于可拖动的元素上

代码如下：

var-app=angular.module（“myApp”，[]）；
指令（“dragCopy”，函数（$http，$compile，$document）{
返回{
限制：“A”，
链接：函数（$scope$element）{
$element.on（“mousedown”，函数（$event）{
$event.preventDefault（）；
var newNode=$compile（$drag'）（$scope）；
newNode.children（“#title”）.text（$element.parent（）.text（））；
元素（$document[0].body）.append（newNode）；
newNode.css({
顶部：$event.pageY-（newNode.prop（“offsetHeight”）*0.9）+“px”，
左：$event.pageX-（newNode.prop（“offsetWidth”）/2）+“px”，
});
triggerHandler（“mousedown”）；
});
}
}
});
应用程序工厂（“dragDropService”，函数（）{
变量对象={
dropZoneList:[]，
高亮列表：[]，
寄存器：函数（元素）{
object.dropZoneList.push（元素）；
},
highlightDropZones:函数（）{
for（object.dropZoneList中的变量i）{
var element=object.dropZoneList[i]。追加（“”）；
var childrens=element.childrens（）；
object.highlightList.push（childrens[childrens.length-1]）；
}
},
resetDropZones:函数（）{
for（object.highlightList中的变量i）{
object.highlightList[i].remove（）；
}
}
};
返回对象；
});
应用指令（“dropZone”，功能（dragDropService）{
返回{
限制：“A”，
链接：函数（$scope$element）{
dragDropService.register（$element）；
}
};
});
应用程序指令（“DragTableFile”，函数（$document，dragDropService）{
返回{
限制：“A”，
链接：函数（$scope$element）{
var startX=0，
startY=0；
变量x，y；
$element.on（“mousedown”，函数（$event）{
dragDropService.highlightDropZones（）；
startX=$element.prop（“offsetWidth”）/2；
startY=$element.prop（“离视线”）*0.9；
$document.on（“mousemove”，mousemove）；
$document.on（“mouseup”，mouseup）；
});
函数mousemove（$event）{
y=$event.pageY-startY；
x=$event.pageX-startX；
$element.css({
顶部：y+“px”，
左：x+“px”
});
}
函数mouseup（）{
$document.off（“mousemove”，mousemove）；
$document.off（“mouseup”，mouseup）；
$element.remove（）；
console.log（document.elementFromPoint（x，y））；
dragDropService.resetDropZones（）；
}
}
}
});
.itemDrag{
光标：指针；
边框：3px实心#81CFE0；
边界半径：50%；
字体大小：40px；
颜色：#81CFE0；
填充物：5px；
背景色：rgba（255、255、255、0.5）；
}
#接受者{
位置：绝对位置；
左：50%；
右：0；
排名：0；
底部：0；
}
dragFile先生{
位置：绝对位置；
边框：1px实心#81CFE0；
边界半径：5px；
背景色：rgba（1292072240.5）；
光标：指针；
}
.亮点{
位置：绝对位置；
排名：0；
右：0；
左：0；
底部：0；
颜色：#00FF00；
边框：3个虚线#00FF00；
边界半径：5px；
文本对齐：居中；
字体大小：粗体；
文本阴影：0px 0px 2px黑色；
背景色：rgba（0,255,0,0.2）；
}
.亮点：之前{
内容：“向终端添加内容”；
}
.亮点：悬停{
背景色：rgba（0,255,0,0.5）；
}
您可以使用document.element frompoint来标识光标所在的元素。现在，您只需验证它是否具有“highlight”类

顺便说一句，如果要使用translate来移动元素图像，document.elementFromPoint会有更好的结果，因为拖动的元素不会产生干扰

function mousemove($event) {
    y = $event.pageY - startY;
    x = $event.pageX - startX;

    var dropElement = document.elementFromPoint(x, y);

    console.log(dropElement.classList.contains('highlight'));

    $element.css({
        top : y + "px",
        left : x + "px"
    });
}

是否可以只使用CSS

事实上，由浏览器决定元素是否悬停。因此，如果他说不，那么我不确定CSS是否足够，如果
：hover
或
：active
首先不会被触发

无论如何，这是一个使用Angular内置行为的JS解决方案：


ngMouseenter+ngMouseleave
将此添加到CSS中：

.hovered {
  background-color: rgba(0, 255, 0, 0.5);
  cursor: pointer;
  z-index: 999;
}

然后使用mouseenter和mouseleave在dropZone指令中的行为，如下所示：

app.directive("dropZone", function(dragDropService) {
  return {
    restrict: 'A',
    link: function($scope, $element) {
      dragDropService.register($element);

      $element.bind("mouseenter", function(e){
         // if mouse's button is not clicked then we are not dragging
         if(e.buttons == 1 || e.buttons == 3){
            $element.addClass('hovered');
         }
      });

      $element.bind("mouseleave", function(){
          $element.removeClass('hovered');
      });

    }
  };
});

此代码段显示了它的工作原理：


var-app=angular.module（“myApp”，[]）；
指令（“dragCopy”，函数（$http，$compile，$document）{
返回{
限制：“A”，
链接：函数（$scope$element）{
$element.on（“mousedown”，函数（$event）{
$event.preventDefault（）；
var newNode=$compile（$drag'）（$scope）；
newNode.children（“#title”）.text（$element.parent（）.text（））；
元素（$document[0].body）.append（newNode）；
newNode.css({
顶部：$event.pageY-（newNode.prop（“offsetHeight”）*0.9）+“px”，
左：$event.pageX-（newNode.prop（“offsetWidth”）/2）+“px”，
});
triggerHandler（“mousedown”）；
});
}
}
});
应用程序工厂（“dragDropService”，函数（）{
变量对象={
dropZoneList:[]，
高亮列表：[]，
寄存器：函数（元素）{
object.dropZoneList.push（元素）；
},
highlightDropZones:函数（）{
for（object.dropZoneList中的变量i）{
var element=object.dropZoneList[i]。追加（“”）；
var childrens=element.childrens（）；
object.highlightList.push（childrens[childrens.length-1]）；
}
},
resetDropZones:函数（）{
for（object.highlightList中的变量i）{
object.highlightList[i].remove（）；
}
}
};
返回对象；
});
应用指令（“dropZone”，功能（dragDropService）{
返回{
限制：“A”，
链接：函数（$scope$element）