效果：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于html5的拖拽</title>
<style>
*,html,body{border:0;margin:0;padding:0;width:100%;height:100%}
div{
width:150px;height:200px;background:#ABCEDF;float:left;
}
h4{
width:150px;height:40px;text-align:center;vertical-align:middle;line-height:40px;
}
h4:hover{
width:146px;height:36px;background:yellow;border:2px solid #ABCEDF;cursor:pointer
}
span{
width:150px;height:200px;background:#FEDCBA;float:right;
}
</style>
</head>
<body>
<div>
<h4>拖拽一</h4>
<h4>拖拽二</h4>
<h4>拖拽三</h4>
<h4>拖拽四</h4>
<h4>拖拽五</h4>
</div>
<span>
</span>
<script>
window.onload = function(){
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];
var h4s = div.childNodes;
for(i=0;i<h4s.length;i++){
var h4 = h4s[i];
h4.draggable = true; //使h4可拖拽
/*以下是h4的拖拽事件*/
h4.ondragstart = function(e){
console.log("开始"+this.innerHTML);
e.dataTransfer.setData("Text",this.innerText);
console.log(e);
var h4 = e.target;
h4.flag = true;
}
h4.ondrag = function(e){
console.log("移动"+this.innerText);
}
h4.ondragend = function(e){
console.log("结束"+this.innerHTML);
var h4 = e.target;
h4.flag = false;
}
}
/*以下方法用于实现h4放入span中*/
span.ondragenter = function(e){
e.preventDefault(); //阻止默认事件
console.log(e.dataTransfer.getData("Text")+"进入");
}
span.ondragover = function(e){
e.preventDefault(); //阻止默认事件
console.log("悬浮");
}
span.ondragleave = function(e){
e.preventDefault(); //阻止默认事件
console.log("离开");
}
span.ondrop = function(e){
e.preventDefault(); //阻止默认事件
var h4s = div.childNodes;
for(var j=0;j<h4s.length;j++){
if(h4s[j].flag==true){
//var span = e.target;
//var span = this;
span.appendChild(h4s[j]);
}
}
console.log(e.dataTransfer.getData("Text")+"落下");
}
/*以下方法用于实现h4放入div中*/
div.ondragenter = function(e){
//e.preventDefault();
}
div.ondragover = function(e){
e.preventDefault();
}
div.ondragleave = function(e){
//e.preventDefault();
}
div.ondrop = function(e){
e.preventDefault();
var h4s = span.childNodes;
for(var k=0;k<h4s.length;k++){
if(h4s[k].flag==true){
div.appendChild(h4s[k]);
}
}
}
}
</script>
</body>
</html>
基于html4的拖拽：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>基于html4的拖拽</title>
<style>
#drag{
width:100px;height:100px;background:#ABCDEF;position:absolute;
display:block;float:left;
text-align:center;vertical-align:middle;line-height:100px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="drag">
请拖拽我
</div>
<script>
window.onload = function(){
var drag = document.getElementById("drag");
drag.onmousedown = function(){
drag.onmousemove = function(e){
//console.log(e.clientX+"-"+drag.style.width);
drag.style.left = (e.clientX - 50)+"px";
drag.style.top = (e.clientY - 50)+"px";
}
}
drag.onmouseup = function(e){
drag.style.left = (e.clientX - 50)+"px";
drag.style.top = (e.clientY - 50)+"px";
drag.onmousemove = null;
}
}
</script>
</body>
</html>
相关推荐
标题中的“基于HTML5的拖拽连线”是指利用HTML5的Canvas API和WebGL技术实现的一种交互式图形编辑功能，用户可以通过鼠标拖拽线条来连接不同的图形元素，常见于流程图、电路图或者逻辑图的绘制。这个技术的核心是...
4. `dragenter` 事件：当拖动的元素进入另一个可接受拖放的目标元素时触发。可以用于改变目标元素的视觉反馈，比如高亮显示。 5. `dragover` 事件：在拖动元素在目标元素上移动时频繁触发。由于浏览器的安全策略，...
在这个“HTML5基于SVG实现可拖拽和缩放的世界地图效果源码”中，我们主要会探讨以下几个关键知识点： 1. SVG的基本概念与应用：SVG是一种XML标记语言，用于描述二维图形和图像。它可以精确地控制图形的每一个细节，...
HTML基于vue2.0，拖拽式网站设计器、大屏设计器，基于VUE，实现拖拽 + 配置方式生成数据大屏，为简化开发、提高效率而生。 特性 0 代码： 实现完全拖拽 + 配置式生成大屏，设计即生产。 快速开发&部署： 项目采用...
在本项目"基于html5 drag api实现的vue树形拖拽组件.zip"中，我们聚焦于HTML5的拖放（Drag and Drop）API以及如何在Vue.js框架下构建一个可拖拽的树形组件。 拖放API是HTML5的一个关键特性，允许用户通过简单的鼠标...
在这个名为"基于html5dragapi实现的vue树形拖拽组件"的项目中，开发者利用这两者结合，创建了一个能够允许用户在树形结构中拖拽节点的Vue组件。这个组件对于构建数据管理和配置界面等场景尤其有用，因为它可以提供...
描述中提到的“html5开发”意味着这个插件的开发是基于HTML5标准进行的，充分利用了HTML5提供的特性。在多媒体方面，HTML5提供了一种无需Flash或其他插件即可在浏览器中播放音频和视频的方法，这对于游戏开发尤为...
本资源集合包含了针对移动端的HTML5拖放插件及其演示示例（demo），适用于手机网址开发和基于Mui的前端项目。 1. **HTML5拖放API** HTML5的拖放API提供了一组事件和接口，使得开发者可以方便地实现元素的拖放操作...
基于Vue的可视化拖拽编辑工具旨在进一步提升前端开发效率，允许开发者通过直观的图形界面设计和布局元素，而非编写HTML和CSS代码，从而快速构建UI界面。这种工具特别适用于需要快速原型设计或对非技术背景的团队成员...
拖拽生成HTML的核心原理是基于WYSIWYG（What You See Is What You Get）编辑器。这种编辑器提供了可视化的界面，用户可以将元素（如文本、图片、按钮等）从工具栏拖放到工作区，编辑器则会自动产生相应的HTML代码。...
在这个特定的项目中，“html5基于TweenMax全屏拖拽图片横向切换和放大预览特效”利用了HTML5的Canvas或者SVG元素，结合JavaScript库GreenSock的TweenMax模块，实现了全屏图片的动态展示和交互效果。 首先，我们要...
html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布，可以通过鼠标前后拖拽图片。当点击图片...
在这个“基于Canvas实现拖动滑块验证”的项目中，我们主要探讨如何利用Canvas API来构建一个拖动滑块的验证码系统，这种验证码通常用于增强网站的安全性，防止自动化程序或机器人进行恶意操作。 首先，让我们了解...
这是一个基于HTML5 Drag API 实现的Vue树形拖拽组件的源码项目，非常适合开发者进行学习和实践。项目中包含了完整的开发文档、部署指南以及所有必要的源代码文件，确保用户可以顺利地理解和使用这个组件。 首先，...
综上所述，基于Vue实现可拖拽的树形表格需要对Vue组件化编程、数据管理、事件处理和DOM操作有深入理解，同时还需要掌握HTML5的Drag and Drop API。通过这些技术的结合，我们可以创建出一个既美观又实用的交互式应用...
在本项目中，我们将探讨如何基于HTML5实现流程图和拓扑图的绘制，以及如何利用丰富的图形选项进行自定义设计。 1. **HTML5 Canvas与SVG** - **Canvas**：HTML5的Canvas是一块可以动态绘制图形的画布，通过...
在这个特定的场景中，我们将探讨“基于EXT2.0.2表格间数据拖拽”的实现。 EXT2.0.2中的数据拖拽功能，主要是通过DragDrop（DD）和DragDropGroup（DDG）组件来实现的。DragDrop组件允许用户将元素从一个位置拖动到另...
本源码提供了一个基于Layui的拖拽式表单设计器设计。项目包含174个文件，其中包括122个JavaScript文件、24个CSS样式文件、4个GIF图片、4个WOFF字体文件、4个HTML文件、2个Markdown文档、2个PNG图片、2个EOT字体文件...
本项目以"基于jquery+canvas实现的拖动插件"为主题，利用jQuery与HTML5的Canvas API，创建了一个允许用户点击并拖动图形的功能。 Canvas是HTML5引入的一个强大特性，它提供了一个二维的绘图表面，开发者可以使用...