求一个拖动效果，一个li拖动到另外一个li上面然后实现内容兑换
如上图，我想把1直接用鼠标拖动到50的位置，然后现在的1就等50，反之一样。求JS，JQuery大神帮忙搞搞。无限感谢啊。。。搞定的直接100，没多得分了。3Q jQuery JavaScript --------------------编程问答--------------------
var old ;
$("li").MouseOver(function(){
old=this;
});
$("li").MouseOut(function(){
var temp = old;
Old=this;
this=temp;
});
试试
--------------------编程问答--------------------
<!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 runat="server">
<title></title>
<style>
html,body{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.list
{
width: 360px; position:relative; border:1px #000000 solid;
padding:2px; overflow:hidden;
}
.list ul, list li
{
list-style-type: none;
padding: 0;
margin: 0;
}
.list li
{
float: left;
border: 1px #666666 solid;
width: 30px;
height: 30px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 5px;
cursor: default;
}
.list li.select
{
background-color:#0000FF;
color:#ffffff;
}
</style>
<script src="/Scripts/jquery-1.4.1.js"></script>
<script>
var _moveobj;
var _cloneobj
jQuery(document).ready(function () {
jQuery(".list li").mousedown(function () {
jQuery(this).css("cursor", "move");
_cloneobj = jQuery(this).clone(true).insertAfter(this);
jQuery(_cloneobj).css("position", "absolute");
jQuery(_cloneobj).css("z-index", "1");
jQuery(this).addClass("select");
_moveobj = this;
});
jQuery(document).mouseup(function (event) {
jQuery(_moveobj).css("cursor", "default");
jQuery(_moveobj).removeClass("select");
jQuery(_cloneobj).remove();
_cloneobj = null;
var _post = jQuery(".list").offset()
var _cx, _cy, _cx2, _cy2;
_cx = event.clientX - _post.left - 15;
_cx2 = _cx + 30;
_cy = event.clientY - _post.top - 15;
_cy2 = _cy + 30;
var _max = 0;
var _num = -1;
var _x, _y;
jQuery(".list li").each(function (i, item) {
var _ipost = jQuery(item).position();
var _ix, _iy, _ix2, _iy2;
_ix = _iy = _ix2 = _iy2 = 0;
//获取复盖区
if (_cx < _ipost.left) {
_ix = _ipost.left;
_ix2 = _cx2;
}
else {
_ix = _cx;
_ix2 = _ipost.left + 30;
}
if (_cy < _ipost.top) {
_iy = _ipost.top;
_iy2 = _cy2;
}
else {
_iy = _cy;
_iy2 = _ipost.top + 30;
}
var _iw = (_ix2 - _ix);
var _ih = (_iy2 - _iy);
var are = _iw * _ih;
//alert(_iw + ":" + _ih);
//jQuery("#TextBox1").val(jQuery("#TextBox1").val() + "i:" + i + "(w:" + _iw + ",h:" + _ih + ")\r\n");
if (_iw >= 0 && _ih >= 0 && _iw <= 30 && _ih <= 30 && are >= _max) {
_max = are;
_num = i;
_x = _ix2, _y = _iy2;
//alert((_ix2 - _ix));
}
});
if (_num >= 0) {
//jQuery(".list li").eq(_num).css("background-color", "#eeeeee");
//var _ipost = jQuery(".list li").eq(_num).position();
//alert(_cx + ":" + _cy + "," + _ipost.left + ":" + _ipost.top + "," + _x + ":" + _y);
var _changeobj = jQuery(".list li").eq(_num);
_changeobj.clone(true).insertAfter(jQuery(_moveobj));
jQuery(_moveobj).removeClass("select");
jQuery(_moveobj).clone(true).insertAfter(_changeobj);
_changeobj.remove();
jQuery(_moveobj).remove();
}
});
/*
jQuery(".list li").mouseup(function () {
//alert(jQuery(this).html());
jQuery(this).clone(true).insertAfter(jQuery(_moveobj));
jQuery(_moveobj).removeClass("select");
jQuery(_moveobj).clone(true).insertAfter(jQuery(this));
jQuery(this).remove();
jQuery(_moveobj).remove();
jQuery(document).mouseup();
});
*/
jQuery(".list li").mousemove(function (event) {
if (_cloneobj != undefined) {
var _post = jQuery(".list").position();
var _cx, _cy, _cx2, _cy2;
_cx = event.clientX - _post.left - jQuery(_cloneobj).width() / 2;
_cy = event.clientY - _post.top - jQuery(_cloneobj).height() / 2;
_cx2 = _cx + jQuery(_cloneobj).width();
_cy2 = _cy + jQuery(_cloneobj).height();
jQuery(_cloneobj).css("left", _cx);
jQuery(_cloneobj).css("top", _cy);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="list">
<ul>
<%for (int i = 1; i <= 50; i++)
{ %>
<li onselectstart="return false" >
<%= i.ToString()%></li>
<%} %>
</ul>
</div>
</form>
</body>
</html>
--------------------编程问答-------------------- 优化版
<div class="list">
<ul>
<%for (int i = 1; i <= 50; i++)
{ %>
<li tag="<%= i.ToString() %>" onselectstart="return false" >
<%= i.ToString()%></li>
<%} %>
</ul>
jQuery(document).mouseup(function (event) {
....
if (_num >= 0) {
//jQuery(".list li").eq(_num).css("background-color", "#eeeeee");
//var _ipost = jQuery(".list li").eq(_num).position();
//alert(_cx + ":" + _cy + "," + _ipost.left + ":" + _ipost.top + "," + _x + ":" + _y);
var _changeobj = jQuery(".list li").eq(_num);
if (jQuery(_changeobj).attr("tag") != jQuery(_moveobj).attr("tag")) { _changeobj.clone(true).insertAfter(jQuery(_moveobj));
jQuery(_moveobj).removeClass("select");
jQuery(_moveobj).clone(true).insertAfter(_changeobj);
_changeobj.remove();
jQuery(_moveobj).remove();
}
}
</div> --------------------编程问答-------------------- 除
补充：.NET技术 , ASP.NET
