今天学习了妙味课堂的课程:
在html5中有支持元素拖拽的一些属性和方法:
一些实例代码如下:
<div id="div1"></div>

    <ul>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
</ul>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){
var ev = ev||window.event;
ev.dataTransfer.setData('name','su');
this.style.background = 'pink';
};
aLi[i].ondragend = function(){
this.style.background = 'red';
};
aLi[i].ondrag = function(){//在拖动时,连续触发,它与mousemove的区别在于mousemove是必须动着的。
document.title = i++;
};
}
oDiv.ondragenter = function(){//类似于mouseover
this.style.background = '#f2f2f2';
};
oDiv.ondragleave = function(){//类似于mouseout
this.style.background = '#ccc';
};
oDiv.ondragover = function(ev){
var ev = ev||window.event; // 要触发drop事件,就必须在dragover中阻止默认事件
this.style.background = '#202020';
this.style.cursor = 'pointer';
ev.preventDefault();
//return false;
};
oDiv.ondrop = function(ev){
alert(ev.dataTransfer.getData('name'));
};
} </script>
 
 
 

html5的元素拖拽的更多相关文章

  1. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  2. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  3. Selenium - 实现网页元素拖拽

    Drag and Drop, 使用鼠标实现元素拖拽的操作貌似很复杂, 在Selenium中, 借助OpenQA.Selenium.Interactions.Actions类库中提供的方法, 实现起来还 ...

  4. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  5. WPF中元素拖拽的两个实例

    今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListV ...

  6. Selenium WebDriver-通过ActionChains实现页面元素拖拽

    #encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...

  7. VUE 元素拖拽、移动

    元素拖拽 作者:一粒尘土 时间:2019-10-30 使用范围:两个元素位置交换,移动元素到指定位置 涉及函数 属性 解释 draggable 是否允许元素进行拖拽 dragstart 拖拽开始触发的 ...

  8. vue全局自定义指令-元素拖拽

    小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function ( ...

  9. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

随机推荐

  1. Oracle存储过程----存储过程执行简单的增删改查

    1.存储过程执行增加的sql create or replace procedure test_add(id varchar,name varchar,time varchar,age varchar ...

  2. Apache Kafka(九)- Kafka Consumer 消费行为

    1. Poll Messages 在Kafka Consumer 中消费messages时,使用的是poll模型,也就是主动去Kafka端取数据.其他消息管道也有的是push模型,也就是服务端向con ...

  3. 题解【CodeForces171C】A Piece of Cake

    Description 给你\(n\)个数,求出\(\sum_{i=1}^{n} a_{i}\times i\qquad\) Input 共\(n + 1\)个数,分别为\(n\)和\(n\)个数\( ...

  4. 【资源分享】CS起源 V34.4044(经典版本)

    *----------------------------------------------[下载区]----------------------------------------------* ...

  5. Django_连接MySQL

    1. 在Settings中修改 2. 创建数据库 3. 连接mysql 4. pymysql 4.1 安装pymysql 在项目的init文件中添加 Django2.2 不需要伪装

  6. 【Python】【爬虫】爬取酷狗TOP500

    好啦好啦,那我们来拉开我们的爬虫之旅吧~~~ 这一只小爬虫是爬取酷狗TOP500的,使用的爬取手法简单粗暴,目的是帮大家初步窥探爬虫长啥样,后期会慢慢变得健壮起来的. 环境配置 在此之前需要下载一个谷 ...

  7. 为什么各家银行都抢着办理ETC业务?

    最近据于各家银行抢着办ETC业务的话题很火,各家银行不仅有很大的折扣力度,而且又是送油卡又是送现金的,银行为什么会如此乐此不疲?为了让车主办理自家的ETC业务,银行究竟有多卖力? 就在近日,网上疯传一 ...

  8. 关于DLL搜索路径的顺序问题

    DLL的动态链接有两种方法.一种是加载时动态链接(Load_time dynamic linking).Windows搜索要装入的DLL时,按以下顺序:应用程序所在目录→当前目录→Windows SY ...

  9. SQL Server 用户定义表类型

    用户定义表类型: CREATE TYPE [dbo].[TVP_Location] AS TABLE( [Location] [varchar](50) NOT NULL, [Address] [va ...

  10. 概率dp lightoj 1342

    题意:有N根木棍,每根木棍都有一个权值 其中有若干根可识别,若干根不可识别的,抽到了可识别的棍子,就不放回,抽到了不可识别的,就要放回 ,问所有棍子都至少被抽过一次后权值和的期望 不可识别的棍子,就相 ...