ExtJS的拖拽效果示例_extjs

复制代码 代码如下:

<html>
<head>
<title>hello</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="Stylesheet" type="text/css" href="http:10.19.1.55/lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="http:10.19.1.55/lib/extjs/bootstrap.js"></script>
<script type="text/javascript" src="http:10.19.1.55/lib/extjs/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
Ext.onReady(function(){
var drags=document.getElementsByTagName('li');
for(var i=0;i<drags.length;i++)
{
Ext.dd.Registry.register(drags[i]);
}
new Ext.dd.DragZone('today');
new Ext.dd.DragZone('tmrw');

function drop(dropNodeData,source,event,dragNodeData)
{
var dragged=source.dragData.ddel;
var sourceContainer=source.el.dom;
var desContainer=this.getEl();
sourceContainer.removeChild(dragged);
desContainer.appendChild(dragged);

return true;
}
var cfg={onNodeDrop:drop};
new Ext.dd.DropZone('today',cfg);
new Ext.dd.DropZone('tmrw',cfg);
})
</script>
</head>
<body>
<h1>Today</h1>
<ul id="today">
<li>shopping</li>
<li>haircut</li>
</ul>
<h1>Tomorrow</h1>
<ul id="tmrw">
<li>123</li>
<li>456</li>
</ul>
</body>
</html>

时间: 2024-10-23 17:10:57

ExtJS的拖拽效果示例_extjs的相关文章

ExtJS的拖拽效果示例

 拖拽效果想必大家都有见到过吧,实现方式大同小异,在接下来的文章中为大家详细介绍下使用ExtJS是如何做到的 代码如下: <html>  <head>  <title>hello</title>  <meta http-equiv="content-type" content="text/html;charset=utf-8">  <link rel="Stylesheet" ty

JavaScript拖拽效果示例网页解决快速拖拽的问题_鼠标特效

我是拖拽示例DIV1. 可以试验一下效果. 我是拖拽示例DIV2.

JS组件Bootstrap Table表格行拖拽效果实现代码_javascript技巧

一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

JS组件Bootstrap Table表格多行拖拽效果实现代码_javascript技巧

前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的

java swing中实现拖拽功能示例_java

java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: 复制代码 代码如下: package com; import java.awt.*;import java.awt.datatransfer.DataFlavor;import java.awt.dnd.DnDConstants;import java.awt.dnd.DropTarget;import java.awt.dnd.DropTargetAdapter;import java.awt.dn

用 Dreamweaver 制作拖拽效果

dreamweaver 在网上,我们经常可以看到一些非常实用的拖拽效果,特别是应用于网上购物时,访问者直接就可以把选中的物品拖拽到购物箱或者购物车里,非常方便.有趣.不过大多数人不知道,其实用Dreamweaver中的Behaviors也可以做出同样的效果来.如果你有兴趣,就和我一起来制作一个具有拖拽效果的的购物箱吧! 在做拖拽效果的网页之前,首先我们要准备一些图片.比如用作购物箱或购物车的一张 大图片,外加几张代表物品的小图片.我在这儿准备了一个购物袋,还有几样物品,它们分别是:手机.游戏手柄

怎样用Dreamweaver制作拖拽效果

在网上,我们经常可以看到一些非常实用的拖拽效果,特别是应用于网上购物时,访问者直接就可以把选中的物品拖拽到购物箱或者购物车里,非常方便.有趣.不过大多数人不知道,其实用Dreamweaver中的Behaviors也可以做出同样的效果来.如果你有兴趣,就和我一起来制作一个具有拖拽效果的的购物箱吧! 在做拖拽效果的网页之前,首先我们要准备一些图片.比如用作购物箱或购物车的一张大图片,外加几张代表物品的小图片.我在这儿准备了一个购物袋,还有几样物品,它们分别是:手机.游戏手柄和汽车(哇!汽车也可以拖进

Axure交互效果实例:提示文本框和拖拽效果

Axure是现在交互设计师必不可少的交互原型设计工具,其实和任何一款工具一样,只要根据常用效果实例多练练,基本就会知道各个控件的使用.今天分享一些在Axure经常用到的交互实例:带提示的文本框和拖拽效果. 实例下载:Axure常用交互效果实例.rar 1.带提示的文本框 将提示信息放置于文本框内是一种常见的交互方式.当文本框获得焦点时,提示文字消失.当文本框失去焦点时,提示文字重新显示出来.现在就让我们看下这种控件的制作方法. 第一步: 从widget库中拖出text field控件.双击控件在

javascript实现完美拖拽效果

  javascript实现的拖拽效果,可以把屏幕上的图片拖动到任意地方,效果平滑,点击图片还可以从侧边展开图片的详细信息,非常好的相册效果 拖拽的原理 1.获取距离(鼠标的位置-odiv的外边距) 2.理解什么时候用onmousemove事件 3.判断是否过界 html代码: ? 1 <div id="div1"></div> css代码: ? 1 #div1{width:100px;height:100px;background:red;position:a