API:
new Draggable(icon, {
// 是否使用镜像：false为拖动源对象，true为拖动拷贝镜像对象
ghosting: true,
// 是否绝对定位：false为相对于父容器定位
absolute: true,
// 是否还原拖动：true为拖动后释放鼠标会还原回原来位置
revert: function(){return true;},
// 还原过程中执行效果
reverteffect: function(element, top_offset, left_offset) {
element.setStyle({left:0,top:0});
}
});
Droppables.add('drop', {containment: "items",
onDrop: function(element) {
alert(element.id);
}
});
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js drag + drop koyoz</title>
<script type="text/javascript" src="xframework/lang.js"></script>
<script type="text/javascript" src="xframework/drag-drop.js"></script>
<style type="text/css">
* {margin:0px;padding:0px;font-size:12px;}
.drop{
width:200px;
height:100px;
border:1px #A5B6C8 solid;
background:#EEF3F7;
padding:10px;
}
.item {width:100px; height:28px;background:#C2ECA7;text-align:center;line-height:28px;cursor:pointer;margin-top:5px;}
#items {margin: 50px 0 0 100px;}
</style>
</head>
<body>
<div id="drop1" class="drop">水果</div>
<div id="drop2" class="drop">气象</div>
<div id="items1">
<div id="item4" class="item">桃子</div>
<div id="item5" class="item">西瓜</div>
<div id="item6" class="item">葡萄</div>
</div>
<div id="items2">
<div id="item1" class="item">风</div>
<div id="item2" class="item">雨</div>
<div id="item3" class="item">雷</div>
<div id="item3" class="item">电</div>
</div>
<script type="text/javascript">
//逐个注册drag事件
var itemx = document.getElementById('items1').getElementsByTagName("div")
itemx.each(function(item){
new Draggable(item, {
ghosting: false
});
});
//逐个注册drag事件
var itemx = document.getElementById('items2').getElementsByTagName("div")
itemx.each(function(item){
new Draggable(item, {
ghosting: false
});
});
//注册放置对象
Droppables.add('drop1', {
containment: "items1",
onDrop: function(element) {
alert(element.id);
}
});
Droppables.add('drop2', {
containment: "items2",
onDrop: function(element) {
alert(element.id);
}
});
</script>
</body>
</html>
所需要的lib： drag-and-drop 1.0：http://www.kuaipan.cn/file/id_14343253738414509.html
lang 1.0: http://www.kuaipan.cn/file/id_14343253738414508.html
分享到：
相关推荐
本文将详细介绍Drag and Drop API的基本概念、事件处理、以及如何在JavaScript中使用这个API来实现拖拽功能。 Drag and Drop API为Web应用带来了强大的交互性。通过本文的介绍和示例代码，开发者应该能够理解并实现...
Vue DnD Mobile，全称为"Vue Drag and Drop Mobile"，是专门为Vue.js开发的一个拖放库，专为移动设备优化，使得在触摸屏上的交互变得更加自然和流畅。 拖放（Drag and Drop，简称DnD）是一种常见的用户交互模式，...
本篇文章将深入探讨如何使用jQuery实现拖放(Drag and Drop)功能，特别是针对图片的拖放操作。拖放功能是网页交互中常见的一种增强用户体验的方式，常用于文件上传、页面元素排序等场景。 首先，我们需要引入jQuery...
这个列表只包含一个文件——“Draganddrop.html”，这通常是一个简单的HTML文件，可能包含了实现拖放功能所需的HTML结构、CSS样式和内联JavaScript代码。通过分析这个文件，我们可以了解到如何使用DOM事件监听、数据...
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成， 没有考虑兼容firefox。整个代码封装成一个对象 也是借鉴书中的风格...
JavaScript中的拖放(Drag and Drop)功能是一种交互式技术，允许用户通过鼠标操作来移动元素，常用于网页上的文件管理、图像布局或者游戏设计等场景。在这个“Drag and Drop using Javascript.zip”压缩包中，可能...
link href =' bower_components/draganddrop/src/draganddrop.css ' rel =' stylesheet ' type =' text/css '/>< script src =' bower_components/jquery/dist/jquery.min.js ' type =' text/javascript ' &...
本项目“Drag and Drop Shopping Cart using JQuery.zip”利用JavaScript的jQuery库，实现了一个可拖放的购物车功能，这在电子商务网站中非常常见且实用。jQuery是JavaScript的一个轻量级库，它简化了DOM操作、事件...
在现代Web开发中，拖放（Drag and Drop）API提供了一种直观的方式来处理用户与网页元素之间的交互。通过使用HTML5的拖放API，开发者可以实现元素在页面上的拖动和放置，从而增强用户体验。本文将详细介绍如何在...
在JavaScript的世界里，MooTools是一个轻量级且强大的库，它提供了许多实用的功能，包括对DOM操作、事件处理、动画效果以及高级功能如拖放（Drag & Drop）。本篇文章将详细探讨如何利用MooTools 1.2.1版本实现拖拽...
总的来说，"ASP.NET AJAX Extender for multicolumn drag and drop"是一个自定义的解决方案，它利用了ASP.NET AJAX的优势，通过JavaScript和服务器端代码实现了多列拖放功能。这个技术可以显著提升数据呈现的交互性...
在本文中，我们将深入探讨如何使用JavaScript实现拖放（Drag and Drop）功能，以及如何将这一特性应用到分页表格的排序中。首先，我们来看看拖放功能的基本原理。 拖放是网页交互的一种常见方式，它允许用户通过...
在JavaScript的世界里，拖放（Drag and Drop）功能是一种用户交互设计，允许用户通过鼠标或触摸设备抓取一个元素并将其移动到另一个位置。在这个"Drag and Drop Inserting Text to Input Textbox with jQuery"的项目...
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中拖放（Drag and Drop）功能就是一项增强用户交互体验的重要接口。拖放接口允许用户通过鼠标或触控设备将元素从一个位置拖动到另一个位置，使得网页的互动性...
import { DragAndDrop } from 'vue-drag-and-drop' export default { directives: { DragAndDrop }, data() { return { dragOptions: { // 这里可以设置拖放的相关选项 } } } } ``` 在`dragOptions`中...
在给定的压缩包文件中，包含了几种不同的库，如dtree、dhtmlxtree（1.5普通版及1.3专业版）以及drag-drop-tree，这些都是用于实现动态树功能的JavaScript库。接下来，我们将深入探讨这些库及其相关的知识点。 1. ...
总结一下，JavaScript的拖放功能是通过HTML5的Drag and Drop API实现的，涉及的关键事件包括`dragstart`、`drag`、`dragend`、`dragenter`、`dragover`、`dragleave`和`drop`。开发者可以通过这些事件处理函数定制...
在本项目"play_draganddrop"中，我们关注的是如何利用这一特性来实现页面元素的排序。这种功能在各种应用场景中非常常见，比如列表排序、图片库管理和文件管理器等。 PHP，全称“超文本预处理器”，是一种广泛使用...