<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

  #target {

    width: 500px;

    height: 300px;

    line-height: 300px;

    text-align: center;

    border: 3px dashed #ccc;

  }

  #target.active {

    background: #eee;

    box-shadow: 2px 2px 2px #eee;

  }

  </style>

</head>

<body>

  <div class="container">

    <div class="content">

      <img src="toy.png">

      <p>选择文字拖到目标位子</p>

    </div>

    <div id="target">

      <span>拖动文字到这里</span>

    </div>

  </div>

  <script type="text/javascript">

  (function() {

    var target = document.querySelector('#target');

    target.addEventListener('dragenter', function() {

      this.classList.add('active');

    })

    target.addEventListener('dragleave', function() {

      this.classList.remove('active');

    })

    //阻止冒泡和默认行为

    target.addEventListener('dragover', function(e) {

      e.preventDefault();

      e.stopPropagation();

    })

    //目标框得到drop事件

    target.addEventListener('drop', function(e) {

      var data = e.dataTransfer.getData('text/plain');

      var imgSrc = e.dataTransfer.getData('text/uri-list');

      if (data) {

        // 拖入的是文本

        target.innerHTML = data;

      } else if (imgSrc) {

        var img = document.createElement('img');

        img.src = imgSrc;

        target.appendChild(img);

      }

      this.classList.remove('active');

      e.preventDefault();

      e.stopPropagation();

    })

  })()

  </script>

</body>

</html>

javascript拖拽操作的更多相关文章

  1. H5 拖拽操作

    H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...

  2. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  3. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  4. Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

  5. C#拖拽操作

    C#的拖拽 本文将以Winform为例 有两个主要的事件: DragEnter 拖拽到区域中触发的事件 DragDrop 当拖拽落下的时候出发此事件 饮水思源 参考博客: http://www.cnb ...

  6. WPF 的拖拽操作（DragDrop）

    在WPF中似乎没有对拖拽操作进行改变,和以前的方式一样.如果曾近在 Windows 窗体应用程序中使用过鼠标拖放,就会发现在 WPF 中的编程接口实际上没有发生变化.重要的区别是用于拖放操作的方法和事 ...

  7. 微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）

    touchstart     手指触摸动作开始 touchmove    手指触摸后移动 touchcancel  手指触摸动作被打断,如来电提醒,弹窗 touchend      手指触摸动作结束 ...

  8. selenium中各个模块操作：下拉框、鼠标悬浮连贯、拼图拖拽操作、以及其他拖拽操作、连线操作

    1.下拉框的修改操作 方法一:定位到元素后,通过select选择对应的值 方法二:通过两次点击的方法:没有select的value属性时,采用click两次的方法去选择: click第一次后,出现下拉 ...

  9. 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

    回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...

随机推荐

  1. Vmware10 Centos7 共享文件夹设置方法

    先安装包依赖: yum -y install kernel-devel-$(uname -r) yum -y install net-tools perl gcc gcc-c++ 安装vm tool ...

  2. 加密安装Kali Linux条件

    加密安装Kali Linux条件安装Kali Linux到你的电脑过程很简单.首先你需要兼容的电脑硬件.最低硬件要求如下,更好的硬件性能会更好.i386镜象默认使用PAE内核,所以你能在大于4GB内存 ...

  3. 利用SpringCloud搭建一个最简单的微服务框架

    http://blog.csdn.net/caicongyang/article/details/52974406 1.微服务 微服务主要包含服务注册,服务发现,服务路由,服务配置,服务熔断,服务降级 ...

  4. Android 开发 打开默认浏览器发生崩溃

    Android 开发 打开默认浏览器发生崩溃. 代码如下: Intent intent = new Intent(); intent.setAction("Android.intent.ac ...

  5. Java设计模式（17）解释器模式（Interpreter模式）

    Interpreter定义:定义语言的文法,并且建立一个解释器来解释该语言中的句子. Interpreter似乎使用面不是很广,它描述了一个语言解释器是如何构成的,在实际应用中,我们可能很少去构造一个 ...

  6. Casual Note of OS

    20170104 冯诺依曼计算机(遵循冯诺依曼结构设计的计算机:存储器.运算器.控制器.输入设备.输出设备)之前也有计算机,不过在那之前的计算机是专用的,不可编程,只能干特定的事情没法干其他事.与之前 ...

  7. R语言：变量名称和字符串的转换

    R语言:变量名称和字符串的转换 2014-06-23 14:45:27         在R语言中,经常会遇到变量名称和字符串相互转换的问题.比如说,进行1000次循环运算,并将运算结果存储在1000 ...

  8. Java调用SQL Server存储过程

    1.调用普通存储过程(1)创建存储过程CREATE Procedure [dbo].[GetContactListByName]  /*根据联系人姓名获取联系人信息*/@Name nvarchar(5 ...

  9. USB2.0学习笔记连载（六）：USB2.0硬件设计需要注意事项

    笔者在设计USB2.0时找到了一个官方给的硬件设计正确设计指南,其中有些内容还挺nice的.不单单只是USB的设计,其中有些思想可以应用到其他的场合中. 对于USB2.0而言,全速状态下可以达到480 ...

  10. 如何在Windows 10安装和使用Linux的Bash shell

    转载自:百度经验 Windwos 10 的周年更新为开发人员提供一个大的新功能:一个完整的,基于Ubuntu的Bash shell中,可以直接在Windows上运行Linux软件. 这使得“Linux ...