js 拖拽插件 支持ie8
JavaScript拖拽插件支持IE8是一个相对复杂的需求，因为IE8是一个非常老旧的浏览器，其对现代JavaScript特性的支持非常有限。以下是一些基础概念和相关信息：
基础概念
- 拖拽（Drag and Drop）：一种用户界面交互方式，允许用户通过鼠标操作来移动页面上的元素。
- IE8兼容性：IE8是Internet Explorer的第8个版本，发布于2009年，对ES5及以下版本的JavaScript有较好的支持，但对现代浏览器特性支持较差。
相关优势
- 兼容性：能够运行在老旧的IE8浏览器上，确保在这些设备上的用户体验。
- 功能实现：通过插件可以快速实现拖拽功能，无需从头编写复杂的兼容代码。
类型
- 原生JavaScript实现：通过监听鼠标事件（mousedown, mousemove, mouseup）来实现拖拽功能。
- 第三方库：如jQuery UI的Draggable组件，或其他轻量级插件。
应用场景
- 网页布局调整：允许用户自定义页面元素的布局。
- 文件上传：在文件管理界面中，用户可以通过拖拽文件到指定区域进行上传。
- 游戏开发：在一些简单的网页游戏中，拖拽操作是常见的交互方式。
示例代码（使用原生JavaScript）
以下是一个简单的原生JavaScript实现拖拽功能的示例，兼容IE8：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
cursor: pointer;
}
</style>
</head>
<body>
<div id="draggable">Drag me!</div>
<script>
var draggable = document.getElementById('draggable');
var offsetX, offsetY;
draggable.onmousedown = function(e) {
e = e || window.event;
offsetX = e.clientX - draggable.offsetLeft;
offsetY = e.clientY - draggable.offsetTop;
document.onmousemove = dragElement;
document.onmouseup = stopDragging;
};
function dragElement(e) {
e = e || window.event;
draggable.style.left = (e.clientX - offsetX) + 'px';
draggable.style.top = (e.clientY - offsetY) + 'px';
}
function stopDragging() {
document.onmousemove = null;
document.onmouseup = null;
}
</script>
</body>
</html>遇到的问题及解决方法
问题1：IE8不支持addEventListener
原因：IE8使用的是attachEvent方法来绑定事件。
解决方法：
if (draggable.addEventListener) {
draggable.addEventListener('mousedown', function(e) {
// handle mousedown
});
} else if (draggable.attachEvent) {
draggable.attachEvent('onmousedown', function(e) {
// handle mousedown
});
}问题2：IE8中的event对象属性不同
原因：IE8中的event对象属性与标准浏览器不同，例如clientX和clientY在IE8中通过event.clientX和event.clientY访问。
解决方法：
var e = e || window.event;
var clientX = e.clientX || e.pageX;
var clientY = e.clientY || e.pageY;推荐解决方案
对于需要在IE8上实现拖拽功能的场景，推荐使用成熟的第三方库，如jQuery UI的Draggable组件，它已经处理了大量的兼容性问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI Draggable Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
}
</style>
</head>
<body>
<div id="draggable">Drag me!</div>
<script>
$(function() {
$("#draggable").draggable();
});
</script>
</body>
</html>通过使用jQuery UI，可以大大简化代码并提高兼容性，确保在IE8等老旧浏览器上也能正常工作。
相关·内容
我在Wordpress主题中使用引导程序，我需要支持IE8我不能让respond.js正确加载。我累了：使用wp_enqueue_script添加resond.js和
在html中添加respond.
浏览 0提问于2014-08-09得票数 0
有没有任何方法可以在IE8和浏览器以下应用伪类，比如(nth-of-type)？在这个链接中，我尝试使用jquery-extended-selectors.js之类的插件，这个链接包含js文件和描述，以支持IE8和浏览器以下的伪类(n-of type)？我还不能使用上面的插件来应用伪类。
在IE8和浏览器下面还有其他应用伪类的方法吗？如果是的话，怎么做？
浏览 11提问于2013-07-24得票数 0
回答已采纳
2回答
我有一个IE黑客问题，我需要添加专门针对IE7的媒体查询(IE8工作正常)。我也在使用respond.js。所以当我这样做的时候：
<!
浏览 3提问于2014-12-04得票数 0
2回答
我会发现一个错误，上面写着：
Uncaught Error: no such method 'process' for fileupload widget instance jquery-2.1.1.js如何选择图片并通过在IE 8+中工作的JQuery插件显示客户端预览？
浏览 7提问于2014-09-29得票数 7
回答已采纳
1回答
我正在使用来拖拽背景图片，但它在IE8中不起作用，控制台说File: draggable_background.js
浏览 0提问于2015-06-03得票数 0
1回答
我正在测试我的应用程序，虽然它可以在Chrome，FF和Safari中运行，但它不能在IE8中加载。我看到一个空白屏幕，开发人员工具在js文件的开头报告了一个错误。我得到的错误是js文件的前6行是：/* jshint我使用的是emberjs 1.13.9和ember data版本1.13.11，根据文档，emberjs版本1.13.x应该<e
浏览 0提问于2015-10-04得票数 1
我目前正在制作一个对IE8支持有严格要求的web应用程序。应用程序必须在用户在线时将数据存储到LocalStorage，并允许在用户离线时缓存页面。当前的流程是，应用程序可以允许在线访问，并且应该缓存特定的资源，并且在脱机时使用纯HTML / CSS / JS操作，即使用户关闭并打开页面也是如此。通常我可以使用脱机清单，但这在IE8中是不受支持的。这个页面几乎是有帮助的，只是这个人放弃了支持IE8：
Google Gears不是首选，因为它已被弃用，
浏览 1提问于2013-06-26得票数 1
回答已采纳
IE8中的错误:预期对象return base[name].apply(this, args);$('.timer', currentOffer如果您想看到一个包含所有代码和各种插件的JS小提琴，那么：任何帮助都会受到感谢！
浏览 2提问于2014-03-03得票数 1
回答已采纳
1回答
使用，我使用从XML生成事件对象。在月份视图中，每个事件在日历上出现两次(提要中每个事件有两个<td>)。
我试过的
$(“#日历”).fullCalendar({ events: function(开始、结束、时区、回调)){ $.ajax({ url: settings.feedURI，dataType："xml“)，成功: function(doc) { var events = []；$(Doc).find(“收购”).each(函数()){ events.push({ title：$(t
浏览 6提问于2016-01-15得票数 3
回答已采纳
我用JQuery 1.11.2.min.js表示IE8。我使用引导3和Jasny引导，并形成验证插件也。现在，在我添加respond.js和html5shive.js之后，除JQuery.1.11.2min.js 第5053行中的错误外，所有错误都将得到解决。对象不支持此属性或方法“exec”。
有谁可以帮我？
浏览 3提问于2015-03-12得票数 1
我在将文件从我的ember.js前端上传到grails后端时遇到了问题。因为支持IE8，所以我不能使用任何像ember这样的余烬插件。对如何解决这个问题有什么建议吗？
浏览 1提问于2015-03-25得票数 2
回答已采纳
这需要在ie8中工作。我不能使用媒体查询。
仅仅使用CSS就可以了吗？(无JavaScript)
浏览 0提问于2012-10-22得票数 0
回答已采纳
我想在我的网站上张贴一些mp4视频，我不想把它上传到youtube或任何第三方的网络应用程序，这将让我把它嵌入到我的网站。我也不想使用像wordpress，drupal这样的博客系统。那么，什么是最好的方式张贴到我的网站，以便大多数设备将能够看到它。我可以定制我使用的播放器吗？我看过w3schools html5的视频，但我觉得没有用。我也看过“”，但我对此并不满意。提示:我已经准备好将我的视频转换成任何需要的格式。
浏览 2提问于2014-08-23得票数 0
回答已采纳
1回答
我在我的项目中使用了jQuery masonry插件，一切都可以在较新版本的浏览器上正常运行。然而，当我试图在IE8上运行它时，我得到了这个错误，并且它不能正常工作：Char: 8948URI: http://localhost/js/masonry.pkgd.min.js
我该怎么解决它呢？如果真的不能让它工作
浏览 1提问于2013-11-15得票数 1
这可能是一个重复，但我并没有找到答案，那么还有什么更有效的--只使用一个普通的视频元素(例如，如果我不需要支持ie8和所有花哨的东西)，还是使用一些插件来处理像video.js这样的视频呢？我主要关心的是加载时间--当使用视频插件时，是否有什么东西可以使视频文件加载得更快？
浏览 2提问于2014-11-24得票数 0
回答已采纳
1回答
我使用jquery rotate插件来旋转左边#left-menu 90dg上的文本。
这是使用IE8显示的内容：
我用这个来旋转文本：看起来IE8没有加载插件，你知道为什么吗？jQuery rotate支持高达IE6。插件网站
浏览 1提问于2014-02-12得票数 0
Video.js的主页声明如下(重点是我)：
无论用户有最新版本的浏览器，还是像Internet 6这样的老版本的浏览器，他们都会在Video.js 上获得类似的体验，后者在不支持HTML5视频的浏览器上使用超级轻量级的这告诉我，如果我有一个IE8的实例没有安装闪存插件，这个“超级轻量级闪存播放器”应该显示视频。然而，情况似乎并非如此；当我去时，我只看到一个黑匣子而不是视频。我是否误解了Video.js嵌入式Flash播放器的用途？还是发生了什么事？
浏览 3提问于2013-03-22得票数 1
回答已采纳
我使用了struts-2作为我的应用程序，为了创建datepicker，我使用了“struts-jquery-...it”标签在其他浏览器中工作得很好，但是在Internet explorer中，它在all..My代码中没有显示出来。<sj:head/>
<sj:datepicker name="dueDate" id="dueDate" displayFormat="mm/dd/yy
浏览 0提问于2013-11-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
