元素的拖放

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="utf-8">

</head>
<body>
    <a href="00_显示_隐藏切换.html">隐藏切换页面</a>
    <img src="../resource/1.jpg" draggable="true" id="img1"/>
<script type="text/javascript">
    var img1 = document.getElementById("img1");
    img1.ondragstart = function(evt){
        evt.dataTransfer.setData("text/plan","www.baidu.com");
    }
    document.ondragover = function(evt){
        //取消事件的默认行为
        return false;
    }
    document.ondrop = function(evt){
        img1.style.position = "absolute";
        img1.style.left = evt.pageY+"px";
        //取消事件默认行为
        return false;
    }
</script>
</body>
</html>

<!--
1 将需要拖动的元素的 draggable 属性设置为 true
2 为拖动的元素设置监听器
-->
时间: 2024-10-06 09:53:53

元素的拖放的相关文章

支持元素惯性拖放和多点触摸手势的js插件

interact.js是一款支持元素惯性拖放和多点触摸手势的js插件.该插件支持在桌面设备和移动手机设备中拖放元素,拖动结束时带有惯性效果.并且支持移动设备的多点触摸手势.它的特点有: 带惯性和吸附效果 支持多元互动 跨浏览器和设备,支持桌面和移动版本的Chrome, Firefox 和 Opera浏览器以及IE8+浏览器 可以和SVG元素相互作用 轻量级,无任何外部依赖 除非要支持IE8或修改鼠标样式,否则不用修改任何DOM元素 效果演示:http://www.htmleaf.com/Demo

H5中元素的拖放

HTML5的拖放 拖放 抓取对象后放在另一个位置 属性和方法 设置元素为可拖放(让元素可以拖动) <img draggable="true"> 拖动什么 事件:ondragstart--规定当元素被拖动的时候会发生什么 方法:dataTransfer.setData(数据类型,可拖动元素的id)--设置被拖数据的数据类型和值 <!-- img可以拖动,拖动时调用函数drag(event),规定被拖动的数据--> <img id="drag1&qu

小练习:元素的拖放

看到很多地方都用到了拖放,因此就自己尝试写了一个,刚开始以为很简单,结果到处都是陷阱. 不多说了,先放写好的程序,在来说说其中遇到的问题. 不过大家可以先自己写写,再来看可能效果更好. <!doctype html> <html> <head> <meta charset="utf-8"> <style> #drag{ position: fixed; top:100px; left: 100px; width: 100px;

[Flex] 组件Tree系列 —— 支持元素的拖放排序

mxml: 1 <?xml version="1.0" encoding="utf-8"?> 2 3 <!--功能描述:支持元素拖放排序--> 4 5 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 6 xmlns:s="library://ns.adobe.com/flex/spark" 7 xmlns:mx="libra

《JAVASCRIPT高级程序设计》原生拖放和媒体元素

一.原生拖放 最早在网页中引入javascript拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.而现在,几乎网页中的任何元素都可以拖放以及作为放置目标.下面介绍一些与拖放相关的内容: 1.拖放事件 在拖放事件中,将依次在被拖动的元素和作为放置目标的元素上触发3个事件: 被拖动的元素:dragstart----drag----dragend 作为放置目标的元素:dragenter----dragover---dragleave(元素被拖出了目标)或drop(元素被放到了放置

selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面(转)

selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面 博客分类: Selenium-webdriver 元素拖放drag and drop Q群里有时候会有人问,selenium  webdriver怎么实现把一个元素拖放到另一个元素里面.这一节总一下元素的拖放. 下面这个页面是一个演示拖放元素的页面,你可以把左右页面中的条目拖放到右边的div框中. http://koyoz.com/demo/html/drag-drop/drag-drop.

JavaScript一个拖动元素的实例

<script type="text/javascript" src="./whenReady.js"></script> <body> <script type="text/javascript"> whenReady(function(){ var clock = document.getElementById('clock'); //时钟元素 var icon = new Image(); /

原生拖拽,拖放事件(drag and drop)

原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事件流程 一个完整的drag and drop流程通常包含以下几个步骤: 设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽. 监听dragstart设置拖拽数据 为拖拽操作设置反馈图标(可选) 设置允许的拖放效果,如copy,move,link 设置拖放目标,默认情况

HTML5拖放API

拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在 Safari 5.1.2 中不支持拖放. 拖放步骤 1.对象元素的draggable属性设置为true(draggable="true").还需要注意的是a元素和img元素必须指定href.dragstart 被拖放的元素