JQuery的scroll和draggable问题

huangxiaofei 2011-06-29 03:03:47

谁来帮我看看，为什么我的代码里在拖动选项时，在IE 6和8下被拖动的项目和鼠标的位置总是错位的（Firefox没有任何问题，但是用户坚持一定要在IE下运行正确）。妈妈的弄了两天了都弄不好。

注意：根据客户的要求，我的draggable区域必须支持拖动，而且必须支持滚动条。



<html>



<head>

<title></title>



<script src="js/jquery.js"></script>

<script src="js/jquery.dimensions.js"></script>

<script src="js/ui/ui.mouse.js"></script>

<script src="js/ui/ui.draggable.js"></script>

<script src="js/ui/ui.draggable.ext.js"></script>

<script src="js/ui/ui.droppable.js"></script>

<script src="js/ui/ui.droppable.ext.js"></script>

<script src="js/ui/ui.sortable.js"></script>

</head>



<style>

.title {

font-weight:bold;

font-size:12px;

height:17px;

padding:5px 5px 0px 25px;

background:url(../images/titlebg.gif);



border-bottom:1px solid #abc1dd;

float:left;

}



.item {

	font-weight:bold;

	font-size:12px;

	height:17px;

	width:300px;

	border-bottom:1px solid #abc1dd;

	float:left;

}



.receive {

 	height: 200px;

	width: 300px;

	overflow-x: hidden;

	overflow-y:	auto;

	float:left;

	

}



.navitem {

	font-weight:bold;

	font-size:12px;

	height:17px;

	width:300px;

	border-bottom:1px solid #abc1dd;

	float:left;

}

</style>







<body>

	<div style="height:600px; width:100%;">

    	   <div class="receive">

   				<div class="navitem" id="onboard">登机人员</div>

   			</div> 

                    

      		<div style="overflow-y:auto; overflow-x:hidden; width:300px; height:100px;">

            		<div class="item" id="1">aaa</div>

                    <div class="item" id="2">bbb</div>

                    <div class="item" id="3">ddd</div>

                    <div class="item" id="4">eee</div>

                    <div class="item" id="5">fff</div>

                    <div class="item" id="6">ggg</div>

                    <div class="item" id="7">hhh</div>

                    <div class="item" id="8">iii</div>

                    <div class="item" id="9">jjj</div>

                    <div class="item" id="10">kkk</div>

                    <div class="item" id="11">lll</div>

                    <div class="item" id="12">mmm</div>

                    <div class="item" id="13">nnn</div>

                    <div class="item" id="14">ooo</div>

                    <div class="item" id="15">ppp</div>

                    <div class="item" id="16">qqq</div>

                    <div class="item" id="17">rrr</div>

                    <div class="item" id="18">sss</div>

            </div>  

 	</div>

    

    

</body>

</html>



<script language="javascript">

  var elem = '';

  $(document).ready(function(){

    

    $(".item").draggable({

	helper: 'clone',

	opacity: 0.55,

	start:function(e, ui)

    {

        elem = e.srcElement || e.target;

    }

    });

  });

  

  $(".receive").droppable({

	accept: ".item",

	activeClass: 'droppable-active',

	hoverClass: 'droppable-hover',

	drop: function(ev, ui) 

    {

        var o = elem.innerHTML;

		var oid = o;

		var sid = "s" + oid;       

        

		//有相同的就不插入了。

		if ( document.getElementById(sid) == null)

		{

            $(this).append( "<div id='" + sid + "' title='"+ o +"' class='navitem'>" +  o + "<a href='#' onclick='javascript:$(this.parentNode).remove();' title='删除此栏'> X</a></div>" );

			

	    }else 	{

		

		

		alert ("您已经添加了这个栏目，请您删除后再添加，谢谢！")



		} 

	}

	

});

  



</script>

...全文

663 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

tiffanyyny 2012-05-12

打赏
举报

果然诶！！！加上那句话就好了~十分感谢！！！

leilei4656 2012-04-10

打赏
举报

挺好，我也碰到类似问题了，谢谢lz

brainwkernighan 2011-07-01

打赏
举报

XHTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

太烦了，这些东西

chu_czx444 2011-07-01

打赏
举报

up up

lsw645645645 2011-07-01

打赏
举报

顶一个

huangxiaofei 2011-06-30

打赏
举报

我靠，问题解决了，方法非常地莫名其妙了，我在整个HTML页面的顶端加上了



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然后刷新页面，一切都正常了。

诶......看来还是我的基础知识不足啊，忽略了这一块儿知识

碧海情天-赵亮 2011-06-30

打赏
举报

嗯，这个地方总会造成一些这样无厘头的事情。

huangxiaofei 2011-06-29

打赏
举报

是啊，在网上查了好久，唯一听上去靠谱的办法也就是手动微调了。

brainwkernighan 2011-06-29

打赏
举报

我之前用drag的时候也会有点移位。如果不用那么复杂的div和布局的话，用draggable应该不会有什么大问题。那就是你布局引起的。你可以尝试着修改你的css，尽量避免overflow之类的。实在不行在ie下面可以在每次拖动之前alert出x，y坐标，可以通过修改x，y坐标的偏移量来完成微调，做起来也很简单。

huangxiaofei 2011-06-29

打赏
举报

没有很复杂啊，我只不过把html整个页都贴进来了而已，其实负责拖动的js代码很简单的。



<script language="javascript">

  var elem = '';

  $(document).ready(function(){

    

    $(".item").draggable({

    helper: 'clone',

    opacity: 0.55,

    start:function(e, ui)

    {

        elem = e.srcElement || e.target;

    }

    });

  });

  

  $(".receive").droppable({

    accept: ".item",

    activeClass: 'droppable-active',

    hoverClass: 'droppable-hover',

    drop: function(ev, ui) 

    {

        var o = elem.innerHTML;

        var oid = o;

        var sid = "s" + oid;       

        

        //有相同的就不插入了。

        if ( document.getElementById(sid) == null)

       {

            $(this).append( "<div id='" + sid + "' title='"+ o +"' class='navitem'>" +  o + "<a href='#' onclick='javascript:$(this.parentNode).remove();' title='删除此栏'> X</a></div>" );

            

        }else     {

        

        

        alert ("您已经添加了这个栏目，请您删除后再添加，谢谢！")



        } 

    }

    

});

  



</script>