問題描述

我已經(jīng)使用 Angular 中的指令實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的拖放系統(tǒng).它在 Chrome 中運(yùn)行良好，但 Firefox 不會(huì)在拖動(dòng)事件上公開 event.clientX、event.clientY 屬性(他們只是拒絕修復(fù)它).

所以我正在尋找一個(gè)很好的替代方法來在拖動(dòng)事件中公開這些屬性:x,y 坐標(biāo)是拖動(dòng)事件的視覺反饋所必需的.

代碼在(在 Chrome 和 FF 中測(cè)試).

對(duì)js的改動(dòng):

.directive('mpDrag', function($timeout, $window, $document) {//保持坐標(biāo)私有和//在指令的所有實(shí)例之間共享變量鼠標(biāo)X，鼠標(biāo)Y；$document.on("dragover", function(event){mouseX = event.originalEvent.clientX;mouseY = event.originalEvent.clientY;})返回 {...鏈接:函數(shù)($范圍，元素，屬性){...$超時(shí)(函數(shù)(){....on('拖動(dòng)', function(e) {//這里直接使用mouseX,mouseY//(順便說一句.你應(yīng)該以不同的方式檢測(cè)何時(shí)隱藏元素)console.log(mouseX, mouseY);如果(e.originalEvent.clientX){el.css({'頂部':鼠標(biāo)Y，左":鼠標(biāo)X});} 別的 {el.css('顯示', '無');}});});}};})

I've implemented a simple drag and drop system using directives in Angular. It works fine in Chrome, but Firefox doesn't expose event.clientX, event.clientY properties on drag event (They just refuse to fix it).

So I'm looking for a good alternative to expose these properties on drag event: the x,y coordinates are needed for visual feedback on drag event.

Code is here - check out in Chrome and Firefox to see the problem.

In Chrome, drag an item in the folders, you'll have the same item displayed as visual feedback following the mouse, not in Firefox (because Firefox doesn't support e.clientX and e.clientY in the drag event).

the problem is here (beginning line 45):

.on('drag', function(e) {
    if (e.originalEvent.clientX) {
        el.css({
           'top': e.originalEvent.clientY + 10,
           'left': e.originalEvent.clientX + 10
        });
    } else {
        el.css('display', 'none');
    }
});

So how can I get the mouse position on screen during a drag event, in Firefox (the angular way, I mean with directives, no global variable, or whatever)?

You can hook up to dragover on document -- clientX and clientY are exposed there. Use functional closure to not populating global scope. Here is updated PLNKR (tested in Chrome and FF).

Changes to js:

.directive('mpDrag', function($timeout, $window, $document) {

    // keeping coordinates private and 
    // shared among all instances of the directive
    var mouseX, mouseY;

    $document.on("dragover", function(event){
      mouseX = event.originalEvent.clientX;
      mouseY = event.originalEvent.clientY;
    })

    return {
      ...
      link: function($scope, element, attrs) {
        ...
        $timeout(function() {

        ...
            .on('drag', function(e) {
              // just use mouseX, mouseY directely here
              // (btw. you should detect differently when to hide the element)
              console.log(mouseX, mouseY); 
              if (e.originalEvent.clientX) {
                el.css({
                  'top': mouseY,
                  'left': mouseX
                });
              } else {
                el.css('display', 'none');
              }
            });
        });
      }
    };
  })

這篇關(guān)于Firefox 中的拖動(dòng)事件沒有 e.clientX 或 e.clientY的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！