突出顯示HTML拖放中的下拉區域

我正在構建另一個Drag'n'Drop文件上傳器。我想要做的是在拖動開始時突出顯示頁面上的拖放區域，以便用戶知道將文件移動到哪裏。 接口並不能使它明確的直線距離，這需要在這種情況下...突出顯示HTML拖放中的下拉區域

突出顯示懸浮窗時，用戶已經超過它是好的，但它是當用戶拖動，但還不是時候但在我想要通知的可投放區域。

我無法使用dragstart事件，因爲這會觸發HTML元素被拖動，在這種情況下，它是來自用戶桌面的文件或其他內容。我也試過如下：

$(document.body).on('dragenter', changeTheCSSClass) 
       .on('dragleave', changeItBackAgain);

然而，進入和離開事件觸發的每一個嵌套元素，遊標已經結束了，所以我得到噸事件和類切換回，不斷向前。絕對不是我想要的。

任何想法？

來源

2012-10-24 nickf

你解決這個問題？ – sabithpocker

sabithpocker號碼 – nickf

由於沒有人發佈任何東西，我張貼這個，既不穩定也不100％工作，但有時工作。

changeback = 2; 
changedback = true; 
$(document) 
    .off('dragenter dragleave') 
    .on('dragenter', function (e) { 
    setTimeout(function() { 
     window.clearTimeout(changeback); 
     changeback = 0; 
     console.log('dragenter', e.target); 
     if (changedback) document.getElementById('nav-askquestion').style.color = '#bc0000'; 
     changedback = false; 
    }, 10); 
}) 
    .on('dragleave', function (e) { 
    console.log('dragleave', e.target); 
    if (changeback == 0) { 
     changeback = window.setTimeout(function() { 
      console.log('changed back'); 
      document.getElementById('nav-askquestion').style.color = '#FFFFFF'; 
      changedback = true; 
     }, 15); 
    } 
});

適用於本頁面。您還需要通過在dragstart上設置一些標誌來取消內部拖動。

名稱dragenter和dragleave應該是實際dragover和dragout似乎:)

這如何在你結束了嗎？

來源

2012-10-25 13:04:31 sabithpocker

感謝您在這裏的努力，但對我來說，這感覺太過分了。 – nickf

@nickf是的，即使對我來說也有點過分:)希望規範編寫者將來會照顧你的情況。如果你在這裏找到一些解決方案 – sabithpocker

你可以使用angularJS：

<div align="center" class="alert alert-success ng-pristine ng-untouched ng-valid ng-empty" 
    ngf-select="onPrepareFile($file)" ngf-drop="onPrepareFile($file)" ng-model="vm.file" 
    name="inputFileStorage" 
    ngf-pattern="'image/*,application/pdf'" 
    ngf-accept="'image/*,application/pdf'" 
    ngf-max-size="10MB"> 
     <a ng-show="!file"><strong>Select or Drop File Here</strong></a> 
     <a ng-show="file" class="ng-hide"><strong class="ng-binding"> has been Loaded</strong></a> 
</div>

在我限制與最大10MB大小PDF的例子。

我使用TS編碼，比較遺憾的是生成的代碼，但無法找到原來的TS ...

this.onPrepareFile = function (file) { 
    if (file) { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      // yOUR FILE INFO IS IN: reader.result 
     }; 
     reader.readAsDataURL(file); 
    } 
};

來源

2017-06-16 16:23:21

突出顯示HTML拖放中的下拉區域

回答

相關問題