JavaScript
JQuery的scroll和draggable问题
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区谁来帮我看看，为什么我的代码里在拖动选项时，在IE 6和8下被拖动的项目和鼠标的位置总是错位的（Firefox没有任何问题，但是用户坚持一定要在IE下运行正确）。妈妈的弄了两天了都弄不好。
注意：根据客户的要求，我的draggable区域必须支持拖动，而且必须支持滚动条。
注意：根据客户的要求，我的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>
...全文
相关推荐
jQuery实现右下角浮动可拖动广告窗口特效源码.zip
jQuery实现右下角浮动可拖动广告窗口特效源码.zip
Open UI5 源代码解析之365：jquery-ui-draggable.js
OpenUI5源代码仓库：源代码位置：src\sap.ui.core\src\sap\ui\thirdparty\jqueryui\jquery-ui-draggable.js。
jquery区域拖拽demo
在背景平面图上创建和编辑区块，包括区块描述和其他操作，如选择颜色，编辑，删除等，支持背景拖拽移动和区块拖拽移动
50个jquery插件介绍
通过本文的介绍，你就会知道jquery都能做到什么。您可以根据实际需求选择适合自己的开发插件，很实用哦。
78个个常用的jquery 插件 jquer插件
78个个常用的jquery,里面包括自己收集28个插
