`

拖拽 handle

QQprototype浏览器 
阅读更多
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body
{
margin:10px;
}

#dragHelper
{
position:absolute;/*重要*/
border:2px dashed #000000;
background-color:#FFFFFF;
filter: alpha(opacity=30);
}

.normal
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#FFFFFF;
}

.over
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#f3f3f3;
filter: alpha(opacity=50);
}

.dragArea {
CURSOR: move;
}

</style>
</HEAD>

<BODY oncontextmenu="window.event.returnValue=false">
<input type="text" id="evt" name="eventValue" size="40" />
<div id="dragHelper" style="display:none"></div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">Cobao</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.cobao.cn</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.sina.com.cn</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>网易</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.163.com</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:http://www.qq.com</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>

</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var dragObjs = []; //可以拖拽的元素数组
var dragObjTops = [];

var dragHelper = document.getElementById("dragHelper"); //拖拽时位置框
var dragObj = null; //拖拽对象元素
var dragObjPos = 0;

var dragObjOffset = {left:0,top:0}; //拖拽对象原始位置
var mouseInDragObjOffset = {x:0,y:0}; //鼠标在拖拽对象中的相对位置

var initHeight = 40;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function getPosition(e){ //获取元素相对文档的绝对位置
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}

left += e.offsetLeft;
top += e.offsetTop;

return {x:left, y:top};

}

function mouseCoords(ev){ //获取鼠标相对文档的绝对位置
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

function getMouseOffset(target, ev){ // 获取鼠标相对元素的相对位置
ev = ev || window.event;

var elementPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};
}

function mouseDown(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;

if(dragObj){
return;
}


var dragArea = false;
if(target.getAttribute("dragArea")){
dragArea = true;
}

while(!target.getAttribute("isDragObj")){
if(target.tagName=="HTML")
break;
target = target.parentNode;
}

if(dragArea && target.getAttribute("isDragObj")){
dragObj = target;
//重写的目的是让当前对象在最上层
document.body.removeChild(dragObj);
document.body.appendChild(dragObj);

//记录下拖拽对象原始位置
dragObjOffset.left = dragObj.style.left;
dragObjOffset.top = dragObj.style.top;

dragObj.className = dragObj.getAttribute("overClass");
//鼠标在拖拽对象中的相对位置
mouseInDragObjOffset = getMouseOffset(dragObj, ev);

dragHelper.style.left = dragObj.style.left;
dragHelper.style.top = dragObj.style.top;
dragHelper.style.width = dragObj.offsetWidth;
dragHelper.style.height = dragObj.offsetHeight;
dragHelper.style.display = "";

//alert(dragObj.offsetWidth+":"+dragObj.clientWidth);
}
}

function mouseUp(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;

if(dragObj){
dragObj.style.left = dragHelper.style.left;
dragObj.style.top = dragHelper.style.top;

dragHelper.style.display = "none";
dragObj.className = dragObj.getAttribute("dragClass");
dragObj = null;
}

}

function mouseMove(ev){
ev = ev || window.event;

if(dragObj) {
var mousePos = mouseCoords(ev);

/*dragHelper.style.left = dragObjOffset.left;
dragHelper.style.top = dragObjOffset.top;
dragHelper.style.width = dragObj.offsetWidth;
dragHelper.style.height = dragObj.offsetHeight;
dragHelper.style.display = "";*/

var windowWidth = document.body.offsetWidth; //窗口宽度
var windowHeight = document.body.offsetHeight; //窗口高度

//拖拽对象应该所在当前位置
var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;
var dragObjTop = mousePos.y - mouseInDragObjOffset.y;

//增加判断，不然拖拽对象拖出浏览器窗口
if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20)
dragObj.style.left = dragObjLeft;

if(dragObjTop >=0)
dragObj.style.top = dragObjTop;

repaint();
}
}

//克隆对象
function cloneObject(srcObj, destObj){
destObj = srcObj.cloneNode(true);
}

function makeDraggable(element){
element.setAttribute("isDragObj", "y");
}

function repaint(){
for(i=0; i<dragObjs.length; i++){
if(dragObjs[i] == dragObj){
dragObjPos = i;
dragObjs[i] = dragHelper;
break;
}
}

if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos-1];
dragObjs[dragObjPos-1] = dragHelper;
dragObjPos = dragObjPos - 1;
}

if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos+1];
dragObjs[dragObjPos+1] = dragHelper;
dragObjPos = dragObjPos + 1;
}
paintDragObjs();
dragObjs[dragObjPos] = dragObj;

}

function paintDragObjs(){
var h = 40;
for(i=0; i<dragObjs.length; i++){
dragObjs[i].style.left = 20;
dragObjs[i].style.top = h;
h += dragObjs[i].offsetHeight + 10;
}
}

function openClose(obj){
obj.innerHTML = obj.innerHTML=="-"?"+":"-";
while(obj.tagName != "TBODY"){
obj = obj.parentNode;
}

for(i=0; i<obj.childNodes.length; i++){
if(obj.childNodes[i].nodeName == "#text"
|| obj.childNodes[i].getAttribute("bar")){ continue; }
obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":"";
}

paintDragObjs();
}

document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;

window.onload = function(){
var objs = document.getElementsByTagName("Div");
for(i=0; i<objs.length; i++){
var item = objs.item(i);
//if(i==1)item.style.height=150;
if(item.getAttribute("overClass")){
makeDraggable(item);
dragObjs.push(item);
item.style.left = 20;
item.style.top = initHeight;
dragObjTops.push(initHeight);
initHeight += item.offsetHeight + 10;
}
}

// dragHelper = document.createElement('DIV');
// dragHelper.style.cssText = 'position:absolute;display:none;';
// document.body.appendChild(dragHelper);
}
//-->
</SCRIPT>
</HTML>
分享到：
| tab选项卡
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    unity自制scroll view面板，scroll bar 可一拖动drag

    在“unity自制scroll view面板，scroll bar可一拖动drag”这个项目中，开发者创建了一个自定义的Scroll View组件，并实现了拖放（drag）功能，使得用户可以通过直接拖动scroll bar来滚动内容。这大大提高了用户体验...

    Unity3d C# 实现滑动条（Slider）的拖拽开始和结束、点击等事件的拓展功能

    Slider组件包含一个Handle（手柄）和一个Track（轨道），用户可以通过拖动Handle来改变滑动条的值。 要实现滑动条的拖拽开始和结束事件，我们可以为Slider组件添加自定义脚本。在C#中创建一个新的脚本，例如命名为`...

    bootStarp可视化框架实现拖动iframe

    handle: ".drag-handle" // 如果需要特定的拖动手柄，可以设置 }); ``` `containment`选项可以防止iframe超出父容器的边界，而`handle`则可以选择一个特定的DOM元素作为拖动手柄。 4. **调整iframe位置**：当...

    谷歌浏览器json插件，Json-Handle插件下载安装使用

    4. 如果你下载的是`.crx`文件，可以直接拖拽到浏览器扩展页面进行安装，但请注意，由于安全原因，Chrome可能会阻止直接安装，此时需要按照上述步骤进行手动加载。 Json-Handle插件的使用方法： 1. 安装完成后，...

    JSON-handle

    2. 安装：在谷歌浏览器中，用户需要进入“设置” -&gt; “扩展程序”页面，然后拖拽下载的CRX文件到该页面，浏览器会提示安装插件，确认后即可完成安装。 3. 使用：一旦安装成功，当用户访问任何包含JSON数据的网页时，...

    chrome-json-handle

    在安装过程中，用户需要确保已开启“开发者模式”，然后将CRX文件拖拽到浏览器的扩展页面进行安装。 总的来说，chrome-json-handle是Web开发者必备的工具之一，通过它，开发者能够更加高效地处理日常工作中遇到的...

    jsonhandle，谷歌浏览器json插件

    用户只需在谷歌浏览器中输入“chrome://extensions/”进入扩展程序页面，然后将下载并解压缩后的CRX文件拖拽到该页面上，浏览器会自动识别并安装插件。这种方法使得用户无需复杂的配置，就能快速启用JSON-handle的...

    拖动程序内的图标得到窗口的handle,class,text,parent,颜色,windo.rar

    这个压缩包文件中的资源和代码似乎是为了实现一个工具，通过拖动图标来获取目标窗口的特定属性，如HANDLE（句柄）、CLASS、TEXT（文本）以及PARENT（父窗口），同时也可能涉及窗口的颜色信息。以下是对这些概念的...

    JQUERY 动态添加层、拖动层、移除层实例

    你可以设置各种选项，如限制拖动范围、设置拖动 handle 等。 ### 3. 移除层 移除层是指在网页上删除不再需要的HTML元素。jQuery的`remove()`方法可以做到这一点： ```javascript $('.remove-layer').click...

    json handle.zip

    通常，这涉及到将解压后的文件拖拽到浏览器的扩展页面，或者手动导入manifest.json文件。安装完成后，开发者可以在浏览器的开发者工具中找到这个插件的入口，可能是在“Elements”、“Console”或“Sources”面板中...

    谷歌浏览器JSON可视化插件：JSON-handle_0.5.6

    谷歌浏览器JSON可视化插件：JSON-handle 简单好用，方便快捷，占用空间小 安装步骤： 1、打开谷歌浏览器，进入Chrome扩展程序页面 2、地址栏直接输入chrome://extensions/ 3、打开右上角的开发者模式 4、将刚刚下载...

    基于C++、Qt实现底层绘图算法的绘图系统源码+项目说明.zip

    * 旋转：拖动handle旋转 * 点：添加了三个相关支持函数 * 直线：使用点的支持函数实现 * 圆：只改变handle，其余均不动 * 椭圆：handle旋转至水平或垂直时，旋转90度 * 多边形：按键时不改变handle ## 下...

    Java实现拖拽列表项的排序功能

    们需要在后端处理拖拽事件，这通常涉及到数据模型的更新。在Java中，我们可能使用JavaFX或Swing来实现这样的功能。对于JavaFX，我们可以监听`onDragDetected`、`onDragEntered`、`onDragExited`、`onDragDropped`和`...

    MGS-Handle v2.0

    “MGS-Handle”脚本资源包用于绑定常见按钮开关、旋钮开关以及摇杆手柄。实现鼠标对开关的点击、拖拽操作，反馈开关状态和事件响应。

    android slidingdrawer实例

    content 是隐藏的抽屉内容，当用户拖动handle时，content会随之滑出或隐藏。 2. **创建SlidingDrawer**： 在XML布局文件中，你可以通过`&lt;SlidingDrawer&gt;`标签来创建一个抽屉。你需要指定handle和content的ID，并...

    vue Element ui实现table列拖动效果

    handle: '.el-table__column-header-wrapper', // 指定可拖动的元素 onEnd: this.handleColumnDragEnd, // 拖动结束事件 }); }, methods: { handleColumnDragEnd({ oldIndex, newIndex }) { // 使用Sortable...

    QGraphicsItem自定义图元，拖动绘制，拖动拉伸缩放图元

    本示例着重介绍如何自定义`QGraphicsItem`实现拖动绘制、拖动以及拉伸缩放图元的功能。下面我们将详细探讨这些知识点。 1. **QGraphicsItem自定义**： 自定义`QGraphicsItem`意味着你需要继承`QGraphicsItem`类，...

    图片上传+拖动排序（vue2+elementUI+vuedraggable）

    在`methods`选项中定义`handleSuccess`和`handleChange`方法，分别处理图片上传成功和拖动排序后的逻辑。`handleChange`方法接收新的排序数组并更新`imageList`。 8. **样式调整** 使用CSS调整组件样式，确保图片...

    flex objecthandles一个很不错的拖拽伸缩控件

    接下来，我们将深入探讨Flex中的拖拽(Drag)和伸缩(Resize)机制，以及ObjectHandle组件如何实现这些功能。 1. Flex框架：Flex是Adobe开发的一种用于构建富互联网应用（RIA）的开源框架，基于ActionScript和MXML。它...

    基于Angular的拖拽排序实现

    moves: (el, source, handle) =&gt; handle.classList.contains('draggable') // 只有具有'draggable'类的元素才能被移动 }); } ``` 4. **模板中的HTML标记** 在对应的`drag-sort.component.html`模板文件中，...

Magicbox
Global site tag (gtag.js) - Google Analytics