JS固定表格前面两列，其余数据可以左右拖动解决方法
日期：2014-05-17 浏览次数：20671 次
JS固定表格前面两列，其余数据可以左右拖动
现在项目要做这个功能，本人JS太烂了，想在论坛上请教下各位大大，希望有人能指教。说思路或发代码都行！（额，本人是刚来CSDN的新手没啥分的，分少了点各位不要怪罪才好）
------解决方案--------------------
ext中有这个功能，具体的忘记了。楼主百度一下，顺便帮顶
------解决方案--------------------
js里面有个drag（）实现拖拽吧。如果是前两行就直接return false；
否则通过取行的offsetLeft和offsetTop的值来定位行的位置，从而实现拖动。
只是我的思想，没试过。
------解决方案--------------------
更正一下
dragable是拖拽整个元素移位
resizable是拖拽导致改变元素区域，你的需求应该是resizable
dragable和resizable都是Jquery提供的接口，你可以用以下简单例子看一下示范：
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; }
</style>
<script>
$(document).ready(function() {
$("#resizable").resizable();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="resizable"></div>
</body>
</html>
更多说明可查阅：
http://docs.jquery.com/UI/Resizable
现在项目要做这个功能，本人JS太烂了，想在论坛上请教下各位大大，希望有人能指教。说思路或发代码都行！（额，本人是刚来CSDN的新手没啥分的，分少了点各位不要怪罪才好）
------解决方案--------------------
ext中有这个功能，具体的忘记了。楼主百度一下，顺便帮顶
------解决方案--------------------
js里面有个drag（）实现拖拽吧。如果是前两行就直接return false；
否则通过取行的offsetLeft和offsetTop的值来定位行的位置，从而实现拖动。
只是我的思想，没试过。
------解决方案--------------------
更正一下
dragable是拖拽整个元素移位
resizable是拖拽导致改变元素区域，你的需求应该是resizable
dragable和resizable都是Jquery提供的接口，你可以用以下简单例子看一下示范：
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; }
</style>
<script>
$(document).ready(function() {
$("#resizable").resizable();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="resizable"></div>
</body>
</html>
更多说明可查阅：
http://docs.jquery.com/UI/Resizable
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
