图片拖拽面向对象写法-1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽之面向对象</title>
<style>
#box1{width: 100px;height: 100px;background-color: #0A246A;
position: absolute;}
</style>
<script>
//第二步：全局变量
var oDiv=null;
var disX=0;
var disY=0;
window.onload=function(){
oDiv=document.getElementById("box1");
oDiv.onmousedown=fnDown;
}
//第一步：拎嵌套函数
function fnDown(ev){
var oEvent=ev||event;
var disX = oEvent.clientX-oDiv.offsetLeft;
var disY = oEvent.clientY-oDiv.offsetTop;
document.onmousemove=fnMove
document.onmouseup=fnUp
}
function fnMove(ev){
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+‘px‘;
oDiv.style.top=oEvent.clientY-disY+‘px‘;
}
function fnUp(){
document.onmousemove=null;
document.onmouseup=null;
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

时间： 2024-10-23 15:57:17

图片拖拽面向对象写法-1的相关文章

图片拖拽面向对象写法-2

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>     #box1{      width: 100px;      height: 100px;      background-color: #ffff00;      position: absolute; 

HTML5多图片拖拽上传带进度条

前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载完毕,还是window.onload之后算呢,对这些方面,我真不敢随意回答,因业务需求而定,本文想要说的是在图片上传的时候用到的进度条. 效果展示 详细参考请移步至html5demo HTML5 新增的拖拽相关事件说明 1.ondragover 效果图演示是所看见的可以将文件不仅仅是图片拖拽到该di

图片拖拽上传至服务器

今天遇到一个新的问题,就是图片拖拽上传至服务器,一般,我们会想到使用ajax,但是现在问题是ajax默认是没有提交事件的,也就是说,我们拖拽上传图片后,没法将上传的图片信息发送到服务器,这时候就要模拟form表单的提交了. 既然要上传,这里首先要讲到的就是图片拖拽上传了. oDiv.ondrop = function(e) { e.preventDefault(); //获取拖拽过来的对象,文件对象集合 var fs = e.dataTransfer.files; //若为表单域中的file标签

拖拽面向对象的写法

<!---css部分---> #div1{  width: 200px;  height: 300px;  position: absolute;  //要实现拖拽需要把div设置为拖动层  background: red; } #div2{  width: 200px;  height: 300px;  position: absolute; //要实现拖拽需要把div设置为拖动层  background: green; top: 300px; } <!---html部分--->

HTML5——将图片拖拽上传

如下图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{width:200px;height:200px;background:red;} </style> <script type="te

Winform图片拖拽与缩放

最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个窗体,拖一个panel控件到窗体中,然后在拖一个pictureobx控件到panel中,然后在添加个上传图片的按钮: 具体代码: using System; using System.Collections.Generic; using System.ComponentModel; using Sy

图片拖拽上传

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="html5/js/jquery-2.0.0.min.js"></script> </head> <body> <div name="image" id=&quo

图片拖拽原生js

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>拖拽原生js</title> <style>      #box1{      width: 100px;      height: 100px;      background-color: #ffff00;      position: abso

原生JS实现图标图片拖拽

实现功能: 原生JS实现图标图拖拽,拖拽的过程中不断输出该div的left.top值. 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: absolute; cursor: pointer; -webkit-box-shadow: 3px 3px