。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
<style type="text/css">
#div1{
overflow: hidden;
position: absolute;
top: 100px;
left:100px;
border:5px solid #000;
width:600px;
height:600px;
}
img{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
var dragObject = null ;
var mouseOffset = null ;
document.onmousemove = mouseMove ;
document.onmouseup = mouseUp;
function mousePoint( x, y ){
this.x = x ;
this.y= y ;
}
function mousePosition( evnt ){
var x = parseInt( evnt.clientX );
var y = parseInt( evnt.clientY );
return new mousePoint(x,y);
}
function getMouseOffset( target , evnt ){
evnt = evnt || window.event ;
var mousePos = mousePosition(evnt);
var x = mousePos.x - target.offsetLeft;
var y = mousePos.y - target.offsetTop;
return new mousePoint(x,y);
}
//关闭拖拽
function mouseUp( evnt ){
dragObject = null ;
}
//拖拽时
function mouseMove( evnt ){
if( !dragObject ) return ;
evnt = evnt || window.event ;
var mousePos = mousePosition( evnt );
//
if( dragObject ){
dragObject.style.position = "absolute";
dragObject.style.top = mousePos.y - mouseOffset.y + "px";
dragObject.style.left = mousePos.x - mouseOffset.x + "px";
return false;
}
}
//
function makeDraggable( item ){
if( item ){
item = document.getElementById( item );
item.onmousedown = function( evnt ){
dragObject = this ;
mouseOffset = getMouseOffset( this , evnt );
return false ;
};
}
}
</script>
</head>
<body onload="makeDraggable('img1');">
<div id="div1">
<img id="img1" src="test1.jpg"/>
</div>
</body>
</html>
分享到：
相关推荐
通过以上步骤，我们可以实现一个基本的图片拖动到指定区域的功能。在实际应用中，可能还需要考虑多点触控、图片缩放等复杂交互，但上述内容已经涵盖了实现此功能的基础部分。在Test_Touch这个项目中，开发者应该已经...
这个例子就是关于如何实现一个功能，让用户可以拖动图片到界面内的任意位置。VB6.0提供了强大的事件驱动编程模型，使得这种交互变得简单。 首先，我们需要了解VB6中的控件和事件。在这个例子中，图片可能是由...
本示例“qml 拖拽图片”聚焦于如何利用QML实现在一个区域内自由拖动图片的功能，这对于创建具有高度互动性的桌面或移动应用来说非常有用。以下将详细介绍如何使用QML实现这个功能。 首先，我们需要了解QML中的关键...
在"10个图片与布局拖拽例子"中，我们将会探索这一领域的多种实现方式，特别是两个整体布局和一个jQuery瀑布流布局。 整体布局，顾名思义，是指用户可以对整个页面或者一个大的容器进行拖拽操作，以改变其在屏幕上的...
标题中的"一个Flex鼠标拖拽图片的简单例子（附源码）"表明我们将讨论如何在Flex项目中创建一个可拖动的图片元素。在Flex中，实现这一功能主要涉及事件监听、坐标转换和图形渲染等技术。以下是具体步骤和知识点： 1....
这个压缩包中的资源提供了一个实现滚动放大缩小和拖动查看图片的例子。下面将详细解释这个实现过程及其涉及的关键知识点。 首先，`test.html`是主HTML文件，它包含了整个预览功能的基本结构。在HTML中，你需要创建...
"jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能，这是一个常见的交互设计，使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中，实现图片拖动主要涉及到`...
这个技术允许用户通过鼠标将一个对象从一处拖到另一处，例如在窗口内部、窗口之间或者应用程序之间移动文件、图片等元素。在这个场景中，我们将深入探讨如何在C#中实现图片的拖放操作，即“拖动图片”。 首先，我们...
在这个例子中，我们看到了几个图片文件（ss.gif、drag_drop_club.gif 等），这可能意味着示例中包含了不同形状或类型的图标，用于创建一个可拖动的卡片游戏。6.html、7.html、1.html、5.html 可能是包含这些拖放功能...
在VB6.0环境下，开发一个能够运行时通过鼠标拖动图片的应用程序，涉及到的核心知识点主要包括事件处理、图像处理和用户交互。以下是对这些知识点的详细说明： 1. **事件处理**：VB6.0使用事件驱动编程模型，即当...
在JavaScript的世界里，...总结，本实例展示了如何使用jQuery实现一个图片拖拽功能，并特别实现了双击启动拖拽的特性。通过理解和应用这些代码，开发者可以创建出具有交互性的、用户友好的网页元素，提升用户体验。
首先，`OnLButtonDown`是MFC中的一个消息处理函数，它对应于鼠标的左键按下事件。当用户点击鼠标左键时，该函数会被调用。在这个函数中，我们可以获取到鼠标的当前位置，即用户点击图片的位置，这通常是拖拽操作的...
为了展示项目文件夹下的所有图片，我们可以遍历指定目录下的所有文件，然后将图片加载到控件或者创建一个新的PictureBox实例来显示每张图片。以下是一个简单的实现： ```csharp private void ShowAllProjectImages...
**标题解析：** "H5 PhotoSwipe简单例子 - vue图片拉伸放大缩放例子" 这个标题表明我们要探讨的是一个使用H5技术，并结合PhotoSwipe库实现的Vue.js项目，该项目主要用于处理图片的放大、缩小和拉伸功能。 **描述...
功能：Wpf的拖拽功能很好使，但是伴随拖拽的图标确实系统级别的，不能更改，就几个很傻的很小的东西，这个例子就是改这个图标的，比如，你拖拽一个文件夹，这时候跟着鼠标走的不是 一个虚线的小东西，而是一个文件夹...
这个源码例子是基于JavaScript实现的，提供了一种创新的方式让用户在预览图片列表时可以自由地拖动调整图片的位置，增强了用户体验。下面我们将深入探讨这个功能的核心知识点。 首先，JavaScript是一种广泛使用的...
通常，你会看到一个包含图片视图的ViewController，该视图上添加了三个手势识别器：一个用于拖动，一个用于旋转，一个用于缩放。每个手势的识别逻辑都会在对应的代理方法中实现，通过对图片视图的transform属性进行...
在Android开发中，拖拽功能是一项常见的交互设计，可以增强用户体验。本文将详细介绍如何实现“拖拽图片”和“拖动浮动按钮到处跑”的...通过这种方式，可以创建出用户友好的交互体验，无论是拖动图片还是浮动按钮。
在本资源"jquery特效 拖拽图片调整效果"中，我们将探讨如何使用jQuery来实现一个功能，允许用户通过拖动图片来调整其位置和效果。这个特性通常用于网页设计中的图像编辑或布局定制，为用户提供直观且互动的体验。 ...
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画设计等任务。在图片拖拽排序中，jQuery提供了强大的事件监听和DOM操作功能，使得实现这一功能变得相对简单。 ### 2. 实现基础拖拽功能 首先...