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
分享到：
相关推荐
jquery实现Drag and Drop,图片拖拽实例
drag and drop 拖放库 vue dnd mobile
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成， 没有考虑兼容firefox。整个代码封装成一个对象 也是借鉴书中的风格...
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 ' &...
JavaScript
用mootools1.2.1 javascript 框架实现拖拽效果。
JavaScript
博文链接：https://sapjava.iteye.com/blog/219717
快速开始首先，请克隆该项目并在终端中运行以下命令： $ git clone https://github.com/Big-Silver/Drag-and-Drop.git drag_drop$ cd drag_drop $ Run index.html in browser.In drag_drop.js$(document).ready...
JavaScript
angular-drag-drop, 在没有任何外部依赖关系的angular.js 中，声明性拖放 Angular drag-and-drop Angular.js 中的声明性拖放和零依赖版权所有( C ) 2015，Geoff Goodman ( https://github.com/ggoodman )安装多种...
Draggz-Chrome-Extension-Drag-Drop Dragg'z是一个Chrome扩展程序，它为用户提供了一种通过拖放DOM元素来修改网页结构的简便方法。 更改将保存到远程数据库中，从而使用户可以共享他们的修改。 使用的技术 Dragg'z...
注意：v-drag-drop的2.x及更高版本仅与Vue 3兼容。 如果使用Vue 2，请安装1.x版。 旨在封装本机拖放API的某些特性，并使其更易于与Vue.js一起使用。 还添加了一些方便的功能，例如名称空间。 目录 安装 安装v-drag-...
vue-drag-and-drop 一个Vue.js指令为元素和数据提供拖放功能
AngularJs_DragAndDrop 如何运行应用程序 检出存储库 出口到Eclipse。 启动服务器。 访问本地主机：8080
Html5DragAndDrop ！1 - 拖放 HTML5 对象！2 - 获取 js 信息文件 3 - 在浏览器中加载图像 4 - Ajax 上传 5 - Gfx 上传
Git bash，运行npm cache clean && npm install 从 Git bash 运行bower cache clean && bower install 从 Git bash 运行git checkout -b your-branch-name 在命令行窗口中，导航到drag-and-drop目录运行grunt test-...
轻巧，编写良好且易于使用的Javascript拖放库。 它允许您动态创建可拖动和可调整大小的图像和图层。
chrome的drag and drop API，它能将本地的图片放到浏览器中进行预览，猜想一下当我们把图片拖拽到浏览器里会发生什么事情，你的浏览器试图打开一个新的页面并加载这个图片。这篇文章给我们介绍drag-and-drop实现图片...