用jsp如何实现拖动效果

abcdefg171459 2009-10-19 05:30:45

假如有个什么控件，在jsp页面上，用鼠标能使其伸缩，请问如何实现，有代码最好，谢谢！

...全文

502 31 打赏收藏转发到动态举报

写回复

用AI写文章

31 条回复

切换为时间正序

请发表友善的回复…

发表回复

James__Zhan 2009-10-22

打赏
举报

[Quote=引用 28 楼 abcdefg171459 的回复:]
提示错误：yahoo is not defined,这个怎么解决啊？
[/Quote]

你需要引入脚本yahoo-dom-event.js先。

James__Zhan 2009-10-22

打赏
举报

[Quote=引用 24 楼 abcdefg171459 的回复:]
zhiqiangzhan,能不能用qq沟通啊，我的109670407，留下你的可以不，我加你
[/Quote]

你可以加我MSN，zhiqiangzhan@gmail.COM
工作时间不能上QQ

xiazhili 2009-10-22

打赏
举报

顶！！

abcdefg171459 2009-10-22

打赏
举报

提示错误：yahoo is not defined,这个怎么解决啊？

shang_zchao 2009-10-22

打赏
举报

extjs可以行

luallen 2009-10-22

打赏
举报

看看 jquery 吧这个很强大

abcdefg171459 2009-10-22

打赏
举报

调试不了啊，HTTP Status 404 - /test/

--------------------------------------------------------------------------------

type Status report

message /test/

description The requested resource (/test/) is not available.

怎么回事啊？

abcdefg171459 2009-10-22

打赏
举报

zhiqiangzhan,能不能用qq沟通啊，我的109670407，留下你的可以不，我加你

水中影子 2009-10-21

打赏
举报

来学习来了。嘿嘿

James__Zhan 2009-10-21

打赏
举报

[Quote=引用 15 楼 abcdefg171459 的回复:]
下载了个yui_2.6.0,放到了src目录下，但在myeclipse里出现红叉是什么原因？没弄出来这段代码的效果啊
[/Quote]

调试脚本和页面可以放到DREAMWEAVER里面，至于MYECLIPSE报错，应该没有关系的。解压你的目录后，直接search *.JS就可以找到这些脚本，另外这里面有很多丰富的DEMO，你可以从index。htm进行访问查看。

abcdefg171459 2009-10-21

打赏
举报

下载了个yui_2.6.0,放到了src目录下，但在myeclipse里出现红叉是什么原因？没弄出来这段代码的效果啊

ttwings 2009-10-21

打赏
举报

我也来学习学习。

abcdefg171459 2009-10-21

打赏
举报

对应路径是什么啊？

abcdefg171459 2009-10-21

打赏
举报

能不能给个链接啊，找不着脚本库啊

James__Zhan 2009-10-21

打赏
举报

[Quote=引用 20 楼 abcdefg171459 的回复:]
<link rel="stylesheet" type="text/css" href="yui_2.6.0/yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui_2.6.0/yui/build/yahoo-dom-event/yahoo-dom-event.js"> </script>
我这样改对不对？
[/Quote]

你应该还需要把<script type="text/javascript" src="yui_2.6.0/yui/build/dragdrop/dragdrop.js"> </script>
<script type="text/javascript" src="yui_2.6.0/yui/build/resize/resize.js"> </script>
加进去，如果你需要这个功能的话。

这些你多练习练习就熟练了。

lzh_me 2009-10-21

打赏
举报

[Quote=引用 8 楼 zl3450341 的回复:]
http://blog.csdn.net/wtcsy/archive/2009/06/04/4242471.aspx
看看这个效果是不是你想要的
[/Quote]

这个很强~~

heweiAndPippo 2009-10-21

打赏
举报

学学下面的代码！
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Dialog</title>
<style type="text/css">
.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;}
.dialogtitle{height:26px; width:auto; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103444839.p.gif');}
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');background-position:-21px 0px}
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;}
.dialogbottom{
bottom:1px; right:1px;cursor:nw-resize;
position:absolute;
background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');
background-position:-42px -10px;
width:10px;
height:10px;
font-size:0;}
</style>
</head>
<body >
<input value="创建" type="button" onclick="creat()" />
<div id='aa'></div>
<script>
var z=1,i=1,left=10
var isIE = (document.all) ? true : false;

var $ = function (id) {
return document.getElementById(id);
};

var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}

var Bind = function(object, fun,args) {
return function() {
return fun.apply(object,args||[]);
}
}

var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
}

var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};

var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};

var Dialog = new Class({
options:{
Width : 400,
Height : 400,
Left : 100,
Top : 100,
Titleheight : 26,
Minwidth : 200,
Minheight : 200,
CancelIco : true,
ResizeIco : false,
Info : "新闻标题",
Content : "无内容",
Zindex : 2
},
initialize:function(options){
this._dragobj = null;
this._resize = null;
this._cancel = null;
this._body = null;
this._x = 0;
this._y = 0;
this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);
this._isdrag = null;
this._Css = null;
////////////////////////////////////////////////////////////////////////////////
this.Width = this.options.Width;
this.Height = this.options.Height;
this.Left = this.options.Left;
this.Top = this.options.Top;
this.CancelIco = this.options.CancelIco;
this.Info = this.options.Info;
this.Content = this.options.Content;
this.Minwidth = this.options.Minwidth;
this.Minheight = this.options.Minheight;
this.Titleheight= this.options.Titleheight;
this.Zindex = this.options.Zindex;
Extend(this,options);
Dialog.Zindex = this.Zindex
//////////////////////////////////////////////////////////////////////////////// 构造dialog
var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom'];
for(var i = 0;i<obj.length;i++)
{ obj[i]=create('div',null,function(elm){elm.className = obj[i];}); }
obj[2].innerHTML = this.Info;
obj[4].innerHTML = this.Content;
obj[1].appendChild(obj[2]);
obj[1].appendChild(obj[3]);
obj[0].appendChild(obj[1]);
obj[0].appendChild(obj[4]);
obj[0].appendChild(obj[5]);
document.body.appendChild(obj[0]);
this._dragobj = obj[0];
this._resize = obj[5];
this._cancel = obj[3];
this._body = obj[4];
////////////////////////////////////////////////////////////////////////////////o,x1,x2
////设置Dialog的长宽 ,left ,top
with(this._dragobj.style){
height = this.Height + "px";top = this.Top + "px";width = this.Width +"px";left = this.Left + "px";zIndex = this.Zindex;
}
this._body.style.height = this.Height - this.Titleheight-parseInt(CurrentStyle(this._body).paddingLeft)*2+'px';
/////////////////////////////////////////////////////////////////////////////// 添加事件
addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true));
addListener(this._cancel,'mouseover',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
addListener(this._cancel,'mouseout',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
addListener(this._cancel,'mousedown',BindAsEventListener(this,this.Disappear));
addListener(this._body,'mousedown',BindAsEventListener(this, this.Cancelbubble));
addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false));
},
Disappear:function(e){
this.Cancelbubble(e);
document.body.removeChild(this._dragobj);
},
Cancelbubble:function(e){
this._dragobj.style.zIndex = ++Dialog.Zindex;
document.all?(e.cancelBubble=true):(e.stopPropagation())
},
Changebg:function(o,x1,x2){
o.style.backgroundPosition =(o.style.backgroundPosition==x1)?x2:x1;
},
Start:function(e,isdrag){
if(!isdrag){this.Cancelbubble(e);}
this._Css = isdrag?{x:"left",y:"top"}:{x:"width",y:"height"}
this._dragobj.style.zIndex = ++Dialog.Zindex;
this._isdrag = isdrag;
this._x = isdrag?(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ;
this._y = isdrag?(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0);
if(isIE)
{
addListener(this._dragobj, "losecapture", this._fS);
this._dragobj.setCapture();
}
else
{
e.preventDefault();
addListener(window, "blur", this._fS);
}
addListener(document,'mousemove',this._fM)
addListener(document,'mouseup',this._fS)
},
Move:function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var i_x = e.clientX - this._x, i_y = e.clientY - this._y;
this._dragobj.style[this._Css.x] = (this._isdrag?Math.max(i_x,0):Math.max(i_x,this.Minwidth))+'px';
this._dragobj.style[this._Css.y] = (this._isdrag?Math.max(i_y,0):Math.max(i_y,this.Minheight))+'px'
if(!this._isdrag)
this._body.style.height = Math.max(i_y -this.Titleheight,this.Minheight-this.Titleheight)-2*parseInt(CurrentStyle(this._body).paddingLeft)+'px';
},
Stop:function(){
removeListener(document,'mousemove',this._fM);
removeListener(document,'mouseup',this._fS);
if(isIE)
{
removeListener(this._dragobj, "losecapture", this._fS);
this._dragobj.releaseCapture();
}
else
{
removeListener(window, "blur", this._fS);
};
}
})
new Dialog({Width:300,Height:300,Left:300,Top:300});
new Dialog({Info:"人族",Content:"人族很强吗?"});

function creat(){
new Dialog({Info:title="标题"+i,Left:300+left,Top:300+left,Content:'内容'+i,Zindex:(++Dialog.Zindex)});
i++;left +=10;
}

</script>
</body>
</html>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wtcsy/archive/2009/06/04/4242471.aspx

abcdefg171459 2009-10-21