ondragstart.md

HTML ondragstart 事件属性

在拖动操作开始时运行的脚本

示例

当用户开始拖动 <p> 元素时执行 JavaScript：

<p draggable="true" ondragstart="myFunction(event)">拖我一把！</p>

<style>
  .droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }
</style>
<p>在两个矩形之间来回拖动 p 元素：</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">拖我一把！</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;" id="demo"></p>
<script>
  function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "开始拖动p元素";
  }
  function dragEnd(event) {
    document.getElementById("demo").innerHTML = "完成拖动 p 元素。";
  }
  function allowDrop(event) {
    event.preventDefault();
  }
  function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
</script>

定义和使用

ondragstart 属性在用户开始拖动元素或文本选择时触发。

拖放是 HTML5 中非常常见的功能。 当您“抓住”一个对象并将其拖到不同的位置时。 有关详细信息，请参阅我们关于 HTML5 拖放 的 HTML 教程。

注意： 要使元素可拖动，请使用全局 HTML5 draggable 属性。

提示： 链接和图片默认是可拖动的，不需要 draggable 属性。

在拖放操作的不同阶段使用并可能发生许多事件属性：

• 在可拖动目标上触发的事件（源元素）：
  • ondragstart - 当用户开始拖动元素时触发
  • ondrag - 拖动元素时触发
  • ondragend - 当用户完成拖动元素时触发
• 在放置目标上触发的事件：
  • ondragenter - 当拖动的元素进入放置目标时触发
  • ondragover - 当被拖动的元素在放置目标上方时触发
  • ondragleave - 当被拖动的元素离开放置目标时触发
  • ondrop - 当拖动的元素被放置在放置目标上时触发

浏览器支持

表中的数字指定了第一个完全支持事件属性的浏览器版本。

事件属性
ondragstart	4.0	9.0	3.5	6.0	12.0

语法

<element ondragstart="script">

属性值

值 Value	描述 Description
script	要在 ondragstart 上运行的脚本

技术细节

支持的 HTML 标签:	所有 HTML 元素

相关页面

HTML 教程: HTML5 拖放

HTML 参考: HTML draggable 属性