<script type="text/javascript"> var tt=document.getElementById("out"); var ff=document.getElementById("aa"); var wid=ff.offsetWidth/2; var hei=ff.offsetHeight/2; function move(e){ e=e||window.event; m=mv(e); ff.style.left=(m.x-wid)+"px"; ff.style.top=(m.y-hei)+"px"; function mv(e){ return { x:e.clientX, y:e.clientY } } } ff.onmousemove=move; </script>鼠标拖动事件
<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);
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();
}
} });
/*
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 tag="<%= i.ToString() %>" onselectstart="return false" >
<%= i.ToString()%></li>
<%} %>
</ul> </div>
</form>
</body>
</html>
var tt=document.getElementById("out");
var ff=document.getElementById("aa");
var wid=ff.offsetWidth/2;
var hei=ff.offsetHeight/2;
function move(e){
e=e||window.event;
m=mv(e);
ff.style.left=(m.x-wid)+"px";
ff.style.top=(m.y-hei)+"px";
function mv(e){
return {
x:e.clientX,
y:e.clientY
}
}
}
ff.onmousemove=move;
</script>鼠标拖动事件
var _ismove;
$(".eMain>ul>li").mousedown(function() {
$(".eMain>ul>li").mouseup(function() {
_ismove = "click";
wa();
});
$(".eMain>ul>li").mousemove(function() {
_ismove = "move";
wa();
});
});
function wa(){
if (_ismove == "move") {
alert('鼠标拖拽');
} else if (_ismove == "click") {
alert('鼠标单击');
}
}
});
var _cloneobj
jQuery(document).ready(function () {
jQuery(".eMain>ul>li").mousedown(function () {
jQuery(this).css("cursor", "move");
var html = ReadModules($(this).attr("name"));
if (html != undefined && html != "") {
_cloneobj = $("#divtest").attr("id");//目标隐藏div
$("#" + _cloneobj + "").html(html);
$("#" + _cloneobj + "").show();
_moveobj = html;
}
jQuery("#" + _cloneobj + "").css("position", "absolute");
jQuery("#" + _cloneobj + "").css("z-index", "1");
jQuery("#" + _cloneobj + "").css("cursor", "move");
});
jQuery(document).mouseup(function (event) {
jQuery("#" + _cloneobj + "").css("cursor", "default");
// jQuery("#" + _cloneobj + "").removeClass("loadCon");
$("#divtest").hide(); });
jQuery("#" + _cloneobj + "").mousemove(function (event) {
if (_moveobj != undefined) {
var _post = jQuery("#processdiv").position();//移动中的容器
alert(_post);
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);
}
});
});现在写成这样 还是不行，你帮忙看看
我想要的效果是，鼠标放到目标li上时，出现隐藏的div层，然后拖动的是这个div层，而不是当前鼠标放的li上，所以要我上面说的那样是不行的，然后把这个div层插入到一个容器中的指定位置。