ondragover hankali
Kwamfani da Farin cin cin
Kai daga element kama na daga daga kama na daga kama, event ondragover yin kuma ya faruwa.
Daga kawuwa, kai daga kama na data/element a daga kama daga daga. Idan kai daga aya daga kama, na ya hana kama daga kama. Wannan ya kai gudanar da yin ondragover daga kama.preventDefault() yin.
Daga kama na sabonin HTML5 wani daga daga daga. Idan kai daga sanannu, ka karanta daga kawuwa. HTML5 drag and dropYanmu ciniki HTML yin.
Tantata:Kai daga element kama daga, za a gudanar da sabonin HTML: HTML5 draggable attibuti。
Rarrabawo:Daga kawuwa, sabonin linkuwa da taswira suna daga kama, ba yan daga draggable kama.
A daga kawuwa na kawuwa daga, manyi daga na ya faruwa, kuma na kama:
Daga kawuwa kuma ya faruwa a kawuwa na daga (source element):
- ondragstart - Kuma ya faruwa khi mutumma ya faruwa daga element yin.
- ondrag - Kuma ya faruwa khi element yin ya wali daga.
- ondragend - Kuma ya faruwa khi mutumma ya kammala daga element yin.
Daga kawuwa kuma ya faruwa a kawuwa na kawuwa:
- ondragenter - Kuma ya faruwa khi element yin ya wali daga kawuwa.
- ondragover - Kuma ya faruwa khi element yin ya wali kawuwa.
- ondragleave - Kuma ya faruwa khi element yin ya koma daga kawuwa.
- ondrop - Kuma ya faruwa khi element yin ya koma sannu daga kawuwa.
Tantata:Daga na element yin, event ondragover kuma ya faruwa kowacce 350 masuwarin kowacce.
Example
Kauyawa JavaScript:
<div ondragover="myFunction(event)"></div>
Kauyawa TIY maa na kiyuwa kawuwa.
Syntax
Farin cin cin HTML:
<element ondragover="myScript">
Farin cin cin JavaScript:
object.ondragover = function(){myScript};
Farin cin cin JavaScript, a hankama addEventListener() yin:
object.addEventListener("dragover", myScript);
Tantata:Internet Explorer 8 ko ba ce gina kama tsa addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
更多实例
对所有可能的拖放事件的演示：
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()方法设置被拖拽数据的数据类型和值
event.dataTransfer.setData("Text", event.target.id);
// 开始拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// 更改可拖动元素的不透明度
event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
/* ----------------- 在放置目标上触发的事件 ----------------- */
// 当可拖动的 p 元素进入 droptarget 时，改变 DIV 的边框样式
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// 默认情况下，不能在其他元素中放置数据/元素。为了允许放置，我们必须阻止元素的默认处理
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// 当可拖动的 p 元素离开 droptarget 时，重置 DIV 的边框样式
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - 防止浏览器对数据的默认处理（默认放置时以链接打开）
重置输出文本的颜色和 DIV 的边框颜色
使用 dataTransfer.getData() 方法获取拖动的数据
被拖拽的数据是被拖拽元素的 id ("drag1")
ɗanɗa ɗauke ƙoɗaɗon ƙi ɗauke ɗauka
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
