Beispiel hier ziehen über: http://codepen.io/eliseosoto/pen/YqxQKxPrevent Autoscroll während einem scrollbaren Container
const l = document.getElementById('scrollableList');
const item3 = document.getElementById('item3');
l.addEventListener('mouseover', function(e) {
e.stopPropagation();
e.preventDefault();
console.log('mouseover', e.target);
});
item3.addEventListener('dragenter', function(e) {
e.stopPropagation();
e.preventDefault();
console.log('dragenter', e.target);
});
l.addEventListener('dragover', function(e) {
console.log('xxx');
e.stopPropagation();
e.preventDefault();
});
l.addEventListener('scroll', function(e) {
console.log('scroll!', e);
e.stopPropagation();
e.preventDefault();
});
item3.addEventListener('dragover', function(e) {
console.log('dragover item3');
e.stopPropagation();
e.preventDefault();
});
#container {
background-color: lightblue;
}
#scrollableList {
height: 50px;
background-color: green;
overflow: auto;
}
<div id="container">
<br>
<div id="scrollableList">
<div>Item 1</div>
<div>Item 2</div>
<div id="item3">Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
<div>Item 11</div>
<div>Item 12</div>
<div>Item 13</div>
<div>Item 14</div>
</div>
<br>
<div id="dragMe" draggable="true">Drag me near the top/bottom of the Item list.</div>
</div>
Beachten Sie, dass, wenn Sie ziehen Sie das "me Ziehen .." Text in der Nähe der oberen/unteren Rand der Nachrichten Liste, die Liste wird automatisch gescrollt.
Normalerweise ist dieses Verhalten nützlich, weil Sie die gewünschte Drop-Zone anzeigen können, aber manchmal ist das überhaupt nicht erwünscht.
Gibt es eine reine JS-Methode, um dieses Verhalten in Chrome 47+ zu deaktivieren? Ich habe versucht, mit 'Dragover', 'Mouseover', 'Scroll' usw. auf verschiedene Elemente vergeblich.
Sieht aus wie diese Frage hier beantwortet wurde. http://Stackoverflow.com/q/4770025/684869 – cgatian
Danke! Das ist aber immer noch nicht perfekt, es hat ein paar Nachteile: a) Sie müssen die dragstart/dragend Listener zu allem hinzufügen, was Sie über die Liste ziehen können. b) Sie können die Liste weiterhin scrollen lassen, indem Sie über eine Datei ziehen oder Text aus der Liste auswählen und ziehen. –