首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在IE9中拖放HTML

在IE9中拖放HTML元素,可以使用以下方法:

  1. 使用HTML5的拖放API

在IE9中,可以使用HTML5的拖放API来实现拖放功能。具体步骤如下:

1.1. 设置元素的拖放属性

在要拖放的元素上设置draggable属性为true,例如:

代码语言:html
复制
<div draggable="true">拖动我</div>

1.2. 监听拖动事件

在元素上监听dragstart、dragend等事件,例如:

代码语言:javascript
复制
element.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', '拖动的内容');
});

element.addEventListener('dragend', function(event) {
  // 拖动结束后的操作
});

1.3. 监听放置目标的事件

在放置目标元素上监听dragover、drop等事件,例如:

代码语言:javascript
复制
targetElement.addEventListener('dragover', function(event) {
  event.preventDefault();
});

targetElement.addEventListener('drop', function(event) {
  var data = event.dataTransfer.getData('text/plain');
  // 处理放置的内容
});
  1. 使用jQuery UI库

如果不使用HTML5的拖放API,可以使用jQuery UI库来实现拖放功能。具体步骤如下:

2.1. 引入jQuery和jQuery UI库

在HTML文件中引入jQuery和jQuery UI库,例如:

代码语言:html<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
复制

2.2. 设置元素的拖放属性

在要拖放的元素上设置draggable属性为true,例如:

代码语言:html
复制
<div id="draggable" draggable="true">拖动我</div>

2.3. 设置放置目标的元素

在放置目标元素上设置droppable属性为true,例如:

代码语言:html
复制
<div id="droppable">放置区域</div>

2.4. 初始化拖放功能

在JavaScript代码中初始化拖放功能,例如:

代码语言:javascript
复制
$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      // 处理放置的内容
    }
  });
});

总之,在IE9中实现拖放功能可以使用HTML5的拖放API或者使用jQuery UI库。需要注意的是,在使用这些方法时,要确保在IE9中启用了JavaScript和相关的拖放功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTML拖放介绍

1.jQuery UI里面会经常使用Draggable和Droppable,实现Web开发拖放效果,当然这不是原生条的拖放,所以处理复杂的拖放上还是需要自己动手写很多代码,最近开发中就遇到这个问题...拖放的广泛用途:文件管理、数据传输、图标绘制和其他许多操作。个人觉得列表文件,比如树形菜单上用的比较多。...Web拖放发展历史 第一阶段: 因为HTML和DOM可以处理底层的鼠标事件,所以早起的开发人员可以借助Javascript和CSS,DOM事件基础,可以近似实现一个简单的拖放功能。...所以可以看到很多拖放文件上传工具使用了flash去上传,业务逻辑上又复杂的拖放操作也都交给了flash去完成。毕竟flash动画交互方面还是很有优势的。...第三阶段: HTML5发布之后,技术越来越成熟。而已标准中提供了拖放的API,所以越来越多的公司关注HTML5拖放操作。看一个Skydrive上传文件的示例和Dropbox上传文件的示例。

3.1K100

HTML5拖放功能

要学会掌握html5拖放api和 文件api,光标拖放事件,从web网页上访问本地文件系统。...拖放api html5拖放api重点: 第一,为页面元素提供了拖放特性; 第二,为光标增加了拖放事件; 第三,提供了用于存储拖放数据的DataTransfer对象 draggable特性 draggable...光标拖放事件 html5提供了7个与拖放相关的光标事件: 按照时间的顺序: 第一,开始拖拽时触发的事件,事件的作用对象是被拖拽的元素-dragstart事件 第二,拖放过程触发的事件,事件的作用对象是被拖拽的元素...-dragover元素 第五,拖放的元素离开本元素的范围时触发,事件的作用对象是拖放过程光标经过的元素-dragleave元素 第六,拖放的元素被拖放到本元素时触发,事件的作用对象是拖放的目标元素...-drop元素 第七,拖放操作结束时触发,事件的作用对象是被拖拽的元素-dragend事件 DataTransfer对象 html5提供了DataTransfer对象,用来支持拖拽数据的存储。

2.6K10
  • HTML5 拖放

    一、什么是拖放(Drag 和 drop)? 拖放(Drag 和 drop)WEB软件应用是一种常见的操作,就是用户可以用鼠标点击对象以后拖到另一个位置。...拖放HTML5 标准的一部分,任何标签元素都能够被拖放。 二、为什么需要拖放?...WEB应用开发,可能需要针对页面的某个对象:图片、文字、容器等,进行位置的移动来实现自定义的布局 常见的拖放应用一:电商平台中的商家 店铺装修,这个时候电商平台会提供多个可以拖动的模块,商家可以根据...自己设计的页面布局 将这些模块进行拖动布局 常见的拖放应用二:后台管理系统模块的摆放,复杂的后台管理系统,往往有的页面中会展示很多的 数据展示模块:会员统计、订单统计、员工统计、待办事项、常用操作等等...,这些模块的摆放一般有一个初始默认位置,各种角色的管理员可以根据自己的喜好来将这些模块按照自己的习惯进行拖动摆放 HTML5 之前,我们要想实现针对页面的标签元素的 移动和拖放,没有一个统一的操作标准

    1.5K20

    HTML5 进阶系列:拖放 API 实现拖放排序

    前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。...实现拖放排序 上面已经熟悉了拖放 API 的使用,我们来实现个简单的拖放排序,这也是项目中比较常见的。...先来理一下思路: 一个列表,每个元素都可以被拖放,那首先要给每个元素设置 draggable 属性为 true。 监听每个元素的 dragstart 事件,对源对象做样式处理来区分。...的兼容不太好,不过至少IE10能兼容上面的拖动排序。...插件地址:ios-html5-drag-drop-shim 只需要在原有的代码引入该插件,即可在移动端上实现拖动了。

    1.9K70

    HTML5 进阶系列:拖放 API 实现拖放排序

    前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。...实现拖放排序 上面已经熟悉了拖放 API 的使用,我们来实现个简单的拖放排序,这也是项目中比较常见的。...先来理一下思路: 一个列表,每个元素都可以被拖放,那首先要给每个元素设置 draggable 属性为 true。 监听每个元素的 dragstart 事件,对源对象做样式处理来区分。...的兼容不太好,不过至少IE10能兼容上面的拖动排序。...插件地址:ios-html5-drag-drop-shim 只需要在原有的代码引入该插件,即可在移动端上实现拖动了。

    1.6K10

    理论 | HTML5 进阶系列:拖放 API 实现拖放排序

    HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。...例如: getData() 该方法从 dataTransfer 对象读取数据。参数为 setData 中指定的数据种类。...先来理一下思路: 1、一个列表,每个元素都可以被拖放,那首先要给每个元素设置 draggable 属性为 true。 2、监听每个元素的 dragstart 事件,对源对象做样式处理来区分。...主要代码如下: 完整的代码地址:https://github.com/lin-xin/blog/tree/master/drag-demo 兼容 主要是IE的兼容不太好,不过至少IE10能兼容上面的拖动排序...插件地址:ios-html5-drag-drop-shim 只需要在原有的代码引入该插件,即可在移动端上实现拖动了。 扫码下方二维码, 随时关注更多前端干货文章! ▼ 微信:IMWebTech

    1.3K31

    HTML5绘画与拖放事件

    HTML5绘画 html5出现了许多新的特性,绘画功能就是其中之一。由于html5新增的这些新特性,所以也逐渐取代Flash,毕竟Flash比较占用内存,也经常性奔溃。...以上代码,我们需要通过getContext函数来创建Context绘画对象,Context对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。...地图可以自己二维数组上绘制,1表示显示墙的图片,2表示显示钢板的图片,3则是显示草地的图片。 拖放事件 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。... HTML5 拖放是标准的一部分,任何元素都能够实现拖放。...结合以上几个知识点,可以实现将img元素,来回拖放到不同的div元素,代码示例: ? 运行结果: ? ? ?

    3K30

    HTML5】逐步分析如何实现拖放功能

    那么,就让我们来看看如何实现的吧 二、拖放事件 IE4的时候,Js就可以实现拖放功能了,当时只支持拖放图像和一些文本。...后来随着IE版本的更新,拖放事件也慢慢完善,HTML5就以IE的拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。...(2)目标元素的事件 实现拖放功能的过程,目标元素上的事件有如下三个 事件 含义 dragenter 被拖放元素进入目标元素时触发 dragover 被拖放元素目标元素内时触发(频繁触发) dragleave...drop事件 可以叫做放置目标事件,它是当被拖放元素放置到了目标元素时触发。...值得注意的是,我们没有对 drop事件 做处理之前,将被拖放元素拖动到目标元素时,鼠标样式会变成禁止的样式,如图 ? 而当我们设置元素为可放置了以后,鼠标样式是这样的。如图 ?

    1.5K10

    HTML5原生拖放事件的学习与实践

    前言 之前学习了 HTML5 的拖放事件,开发也用到了拖拽组件。为了厘清整体的逻辑,专门做了一个小例子。...具体实现的效果也很简单:元素可以容器任意拖动,元素被移入容器的时候,还会有相关样式的改变已达到更好的展示效果。 例子基本运用了拖放事件的全部事件,并且尽量简洁的展示了出来。特此记录。...将图中的可拖拽元素,拖放到下面的容器,这个过程的效果如下所示。箭头表示拖拽方向,方框代表动态改变的容器样式。 ? 最后,松开鼠标,将元素放入到下面的容器,整个过程完成。 ?...代码实现 首先,先编写 html 代码。因为元素可以两个容器之间任意拖动,因此这两个容器都需要监听 drapenter、dragover、dragleave、drop 这四个事件。...拖放》 《HTML5 原生拖拽/拖放

    1.2K20

    HTML5 拖放API与Vue.js实战

    拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。 本文中我们将用 Vue.js 构建一个简单的看板应用。...HTML5 拖放 API 是什么? 当用户将鼠标移到可拖动元素上时,拖动操作开始,然后将元素移动到启用拖放的元素上。 再默认情况下,唯一可拖动的 HTML 元素是图像和链接。...可以通过 DataTransfer API 把通过拖动操作传输的数据保存在拖动数据存储区,这个 API 提供了拖放操作期间存储和访问数据的方式。...❞ 组合所有的组件 向组件添加拖放功能之前,先讨论一下 app state。 这里的 app state 将存储 App 组件,然后可以作为 props 向下传递到 Column 组件。...总结 本文中,我们介绍了什么是 HTML 5 拖放 API ,如何使用,以及如何在 Vue.js 实现。 拖放功能也可以在其他前端框架和原生 JavaScript 中使用。

    4.3K10

    HTML 嵌入 PHP 代码

    PHP 与 HTML PHP 天生对 Web 和 HTML 友好, PHP 诞生之初,主要用于 Web 1.0 构建个人主页,那个时候,PHP 代表的是 Personal Home Page,随着... PhpStorm 编写 Html 代码 通过 php -S localhost:9000 启动 PHP 内置的 Web 服务器(已启动忽略),浏览器访问 http://localhost:9000... HTML 嵌入 PHP 代码 接下来,我们 hello.php ,将上一步 和 之间的 HTML 文本替换成 PHP 代码: 之间,并且末尾的 ?> 不能省略,包含纯 PHP 代码的文件,最后的 ?...小结 由此可见, PHP 文件,既可以编写纯 PHP 代码,也可以混合 HTML + PHP 代码进行编程( HTML 嵌入 PHP 代码需要通过完整的 进行包裹)。

    6.2K10

    HTML网页巧用URL

    但通过这种方式实现的动态网页均需要服务器端编程技术的支持,最近笔者制作个人网站时利用浏览器支持的DHTML和XML技术,经过不断尝试,免费主页空间通过这种方式实现动态网页。...program文件则可以通过一定方法来读取环境变量,如asp文件就可以通过Reques.Querystring数据集合来读取环境变量。...这时我们就可以在网页利用Location.href属性获得附加了信息内容的URL串,经过适当处理后就可以得到所附加的信息内容字段名称及其取值,再通过浏览器支持的DHTML特性进行处理,就可以实现网页内容动态化...我们也可以看出,通过这种方式达到网页动态交互的目的即使是浏览器实现也仍然摆脱不了Web服务器的支持,否则浏览器将把“?...该作者就是通过这种途径只支持纯HTML的主页空间建立了一个相当不错的动态图片查看器 所以,各位,实践下咯。

    1.7K20
    领券