javascript拖放,html拖放

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

想在一个div里面添加图片，用js怎么写啊？

1、新建一个HTML文件，保存为test.html，用于编写代码实现拖放功能。

2、在test.html添加一个div标签，并且给它一个id，用于下面编写样式。

3、通过div的id , 给div定义CSS样式，例如，把div定义为一个带边框的长方形。下面将实现将图片拖放在这个长方形中。

4、在div的下面定义一张被拖放图片，并设置该图片的属性为允许被拖放。

5、在被拖放的图片上加上一个ondragstart事件，即图片被拖动时触发这个事件。再给事件一个函数，用于拖动图片时，把图片保存在一个变量中。

6、运行代码，在浏览器中查看结果：至此，完成了使用JS实现拖放图片到div中的功能。

相关问答

Q1: js如何实现本地图片路径拖放至网页上传？

你说的是自动输入某些代码到浏览器console？

既然都是自动化，不如用selenium，相当于可模拟鼠标键盘操作。

Q2: javascript DIV上下拖放功能

首先要包含jquery

[jQuery] 两个ul之间li元素的拖拉和排序 HTML代码：

span class="left"

bone/b

ul id="list1" style="background-color:#ffee00" name="offJob"

li1/li

li2/li

li3/li

li4/li

li5/li

/ul

/span

span class="left"

btwo/b

ul id="list2" style="background-color:#ffee00" name="onJob"

li6/li

li7/li

li8/li

li9/li

li0/li

/ul

/span

jQuery代码：

$(function()

{

$("#list1, #list2").dragsort({

dragBetween: true

});

}

);

需要包含的js文件内容：

(function($) {

$.fn.dragsort = function(options) {

var opts = $.extend({}, $.fn.dragsort.defaults, options);

var lists = new Array();

var list = null, lastPos = null;

this.each(function(i, cont) {

var newList = {

draggedItem: null,

placeHolderItem: null,

pos: null,

offset: null,

offsetLimit: null,

container: cont,

init: function() {

$(this.container).attr("listIdx", i).find(opts.dragSelector).css("cursor", "pointer").mousedown(this.grabItem);

grabItem: function(e) {

if (e.button == 2)

return;

if (list != null list.draggedItem != null)

list.dropItem();

$(this).css("cursor", "move");

list = lists[$(this).parents("*[listIdx]").attr("listIdx")];

list.draggedItem = $(this).is(opts.itemSelector) ? $(this) : $(this).parents(opts.itemSelector);

list.offset = list.draggedItem.offset();

list.offset.top = e.pageY - list.offset.top;

list.offset.left = e.pageX - list.offset.left;

var containerHeight = $(list.container).outerHeight() == 0 ?Math.max(1, Math.round(0.5 +$(list.container).find(opts.itemSelector).size() *list.draggedItem.outerWidth() / $(list.container).outerWidth())) *list.draggedItem.outerHeight() : $(list.container).outerHeight();

list.offsetLimit = $(list.container).offset();

list.offsetLimit.right = list.offsetLimit.left + $(list.container).outerWidth() - list.draggedItem.outerWidth();

list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight();

list.placeHolderItem =list.draggedItem.clone().html(" ").css({ visibility: "hidden",height: list.draggedItem.height() }).attr("placeHolder", true);

list.draggedItem.after(list.placeHolderItem);

list.draggedItem.css({ position: "absolute", opacity: 0.8 });

$(lists).each(function(i, l) { l.ensureNotEmpty(); l.buildPositionTable(); });

list.setPos(e.pageX, e.pageY);

$(document).bind("selectstart", list.stopBubble); //stop ie text selection

$(document).bind("mousemove", list.swapItems);

$(document).bind("mouseup", list.dropItem);

return false; //stop moz text selection

setPos: function(x, y) {

var top = y - this.offset.top;

var left = x - this.offset.left;

if (!opts.dragBetween) {

top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top));

left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left));

}

this.draggedItem.css({ top: top, left: left });

buildPositionTable: function() {

var item = this.draggedItem == null ? null : this.draggedItem.get(0);

var pos = new Array();

$(this.container).find(opts.itemSelector).each(function(i, elm) {

if (elm != item) {

var loc = $(elm).offset();

loc.right = loc.left + $(elm).width();

loc.bottom = loc.top + $(elm).height();

loc.elm = elm;

pos.push(loc);

}

});

this.pos = pos;

dropItem: function() {

if (list.draggedItem == null)

return;

$(list.container).find(opts.dragSelector).css("cursor", "pointer");

list.placeHolderItem.before(list.draggedItem);

list.draggedItem.css({ position: "", top: "", left: "", opacity: "" });

list.placeHolderItem.remove();

$("*[emptyPlaceHolder]").remove();

opts.dragEnd.apply(list.draggedItem);

list.draggedItem = null;

$(document).unbind("selectstart", list.stopBubble);

$(document).unbind("mousemove", list.swapItems);

$(document).unbind("mouseup", list.dropItem);

return false;

stopBubble: function() { return false; },

swapItems: function(e) {

if (list.draggedItem == null)

return false;

list.setPos(e.pageX, e.pageY);

var ei = list.findPos(e.pageX, e.pageY);

var nlist = list;

for (var i = 0; ei == -1 opts.dragBetween i lists.length; i++) {

ei = lists[i].findPos(e.pageX, e.pageY);

nlist = lists[i];

}

if (ei == -1 || $(nlist.pos[ei].elm).attr("placeHolder"))

return false;

if (lastPos == null || lastPos.top list.draggedItem.offset().top || lastPos.left list.draggedItem.offset().left)

$(nlist.pos[ei].elm).before(list.placeHolderItem);

else

$(nlist.pos[ei].elm).after(list.placeHolderItem);

$(lists).each(function(i, l) { l.ensureNotEmpty(); l.buildPositionTable(); });

lastPos = list.draggedItem.offset();

return false;

findPos: function(x, y) {

for (var i = 0; i this.pos.length; i++) {

if (this.pos[i].left x this.pos[i].right x this.pos[i].top y this.pos[i].bottom y)

return i;

}

return -1;

ensureNotEmpty: function() {

if (!opts.dragBetween)

return;

var item = this.draggedItem == null ? null : this.draggedItem.get(0);

var emptyPH = null, empty = true;

$(this.container).find(opts.itemSelector).each(function(i, elm) {

if ($(elm).attr("emptyPlaceHolder"))

emptyPH = elm;

else if (elm != item)

empty = false;

});

if (empty emptyPH == null)

$(this.container).append(list.placeHolderItem.clone().removeAttr("placeHolder").attr("emptyPlaceHolder", true));

else if (!empty emptyPH != null)

$(emptyPH).remove();

}

};

newList.init();

lists.push(newList);

});

return this;

};

$.fn.dragsort.defaults = {

itemSelector: "li",

dragSelector: "li",

dragEnd: function() { },

dragBetween: false

};

})(jQuery);

Q3: js怎么实现一个拖拽事件

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．

有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select 选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！

网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．

获取鼠标移动信息

第一我们需要获取鼠标的坐标．我们加一个用户函数到document.onmousemove就可以了:

Java代码收藏代码

document.onmousemove = mouseMove;

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mouseCoords(ev);

}

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

};

}

你首先要声明一个evnet对象．不论何时你移动鼠标／点击／按键等等，会对应一个event的事件．在Internet Explorer里event是全局变量，会被存储在window.event里．在firefox中，或者其他浏览器，event事件会被相应的自定义函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove会获取鼠标移动事件．

(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值．在MSIE下ev是空的，所以ev将设置为window.event.

因为我们在这篇文章中需要多次获取鼠标坐标，所以我们设计了mouseCoords这个函数，它只包含了一个参数，就是the event.

我们需要运行在MSIE与Firefox为首的其他浏览器下．Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置．如果你有一个500*500的窗口，而且你的鼠标在正中间，那么paegX和pageY将是250，当你将页面往下滚动500px，那么 pageY将是750.此时pageX不变，还是250.

MSIE和这个相反，MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置，并不是文档．当我们有一个 500*500的窗口，鼠标在正中间，那么clientX与clientY也是250，如果你垂直滚动窗口到任何位置，clientY仍然是250，因为相对ie窗口并没有变化．想得到正确的结果，我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性．最后，由于MSIE 并没有0,0的文档起始位置，因为通常会设置2px的边框在周围，边框的宽度包含在document.body.clientLeft与 clientTop这两个属性中，我们再加入这些到鼠标的位置中．

很幸运，这样mouseCoords函数就完成了，我们不再为坐标的事操心了．

捕捉鼠标点击

下次我们将知道鼠标何时点击与何时放开．如果我们跳过这一步，我们在做拖拽时将永远不知道鼠标移动上面时的动作，这将是恼人的与违反直觉的．

这里有两个函数帮助我们:onmousedown与onmouseup.我们预先设置函数来接收document.onmousemove，这样看起来很象我们会获取document.onmousedown与document.onmouseup．但是当我们获取 document.onmousedown时，我们同时获取了任何对象的点击属性如:text,images,tables等等.我们只想获取那些需要拖拽的属性，所以我们设置函数来获取我们需要移动的对象．

移动一个元素

我们知道了怎么捕捉鼠标移动与点击．剩下的就是移动元素了．首先，要确定一个明确的页面位置，css样式表要用'absolute'.设置元素绝对位置意味着我们可以用样式表的.top和.left来定位，可以用相对位置来定位了．我们将鼠标的移动全部相对页面top-left，基于这点，我们可以进行下一步了．

当我们定义item.style.position='absolute'，所有的操作都是改变left坐标与top坐标，然后它移动了．

Java代码收藏代码

document.onmousemove = mouseMove;

document.onmouseup = mouseUp;

var dragObject = null;

var mouseOffset = null;

function getMouseOffset(target, ev){

ev = ev || window.event;

var docPos = getPosition(target);

var mousePos = mouseCoords(ev);

return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

}

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 mouseMove(ev){

ev = ev || window.event;

var mousePos = mouseCoords(ev);

if(dragObject){

dragObject.style.position = 'absolute';

dragObject.style.top = mousePos.y - mouseOffset.y;

dragObject.style.left = mousePos.x - mouseOffset.x;

return false;

}

function mouseUp(){

dragObject = null;

}

function makeDraggable(item){

if(!item) return;

item.onmousedown = function(ev){

dragObject = this;

mouseOffset = getMouseOffset(this, ev);

return false;

}

你会注意到这个代码几乎是前面的全集，将前面的合在一起就实现了拖拽效果了．

当我们点击一个item时，我们就获取了很多变量，如鼠标位置，鼠标位置自然就包含了那个item的坐标信息了．如果我们点击了一个20*20px图像的正中间，那么鼠标的相对坐标为{x:10,y:10}．当我们点击这个图像的左上角那么鼠标的相对坐标为 {x:0,y:0}.当我们点击时，我们用这个方法取得一些鼠标与图片校对的信息．如果我们不能加载页面item，那么信息将是document信息，会忽略了点击的item信息．

mouseOffset函数使用了另一个函数getPosition.getPosition的作用是返回 item相对页面左上角的坐标，如果我们尝试获取item.offsetLeft或者item.style.left，那么我们将取得item相对与父级的位置，不是整个document．所有的脚本我们都是相对整个document，这样会更好一些．

为了完成getPosition任务，必须循环取得item的父级，我们将加载内容到item的左／上的位置．我们需要管理想要的top与left列表．

自从定义了mousemove这个函数，mouseMove就会一直运行．第一我们确定item的 style.position为absolute，第二我们移动item到前面定义好的位置．当mouse点击被释放，dragObject被设置为 null，mouseMove将不在做任何事．

Dropping an Item

前面的例子目的很简单，就是拖拽item到我们希望到的地方．我们经常还有其他目的如删除item，比如我们可以将item拖到垃圾桶里，或者其他页面定义的位置．

很不幸，我们有一个很大的难题，当我们拖拽，item会在鼠标之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我们拖拽一个item到垃圾桶上，鼠标信息还在item上，不在垃圾桶上．

怎么解决这个问题呢？有几个方法可以来解决．第一，这是以前比较推荐的，我们在移动鼠标时item会跟随鼠标，并占用了mouseover/mousemove等鼠标事件，我们不这样做，只是让item跟随着鼠标，并不占用mouseover等鼠标事件，这样会解决问题，但是这样并不好看，我们还是希望item能直接跟在mouse下．

另一个选择是不做item的拖拽．你可以改变鼠标指针来显示需要拖拽的item，然后放在鼠标释放的位置．这个解决方案，也是因为美学原因不予接受．

最后的解决方案是，我们并不去除拖拽效果．这种方法比前两种繁杂许多，我们需要定义我们需要释放目标的列表，当鼠标释放时，手工去检查释放的位置是否是在目标列表位置上，如果在，说明是释放在目标位置上了．

Java代码收藏代码

All code from the previous example is needed with the exception

of the mouseUp function which is replaced below

var dropTargets = [];

function addDropTarget(dropTarget){

dropTargets.push(dropTarget);

}

function mouseUp(ev){

ev = ev || window.event;

var mousePos = mouseCoords(ev);

for(var i=0; idropTargets.length; i++){

var curTarget = dropTargets[i];

var targPos = getPosition(curTarget);

var targWidth = parseInt(curTarget.offsetWidth);

var targHeight = parseInt(curTarget.offsetHeight);

if(

(mousePos.x targPos.x)

(mousePos.x (targPos.x + targWidth))

(mousePos.y targPos.y)

(mousePos.y (targPos.y + targHeight))){

// dragObject was dropped onto curTarget!

}

dragObject = null;

}

鼠标释放时会去取是否有drop属性，如果存在，同时鼠标指针还在drop的范围内，执行drop操作．我们检查鼠标指针位置是否在目标范围是用(mousePos.xtargetPos.x)，而且还要符合条件(mousePos.x(targPos.x + targWidth))．如果所有的条件符合，说明指针确实在范围内，可以执行drop指令了．

Pulling It All Together

最后我们拥有了所有的drag/drop的脚本片断！下一个事情是我们将创建一个DOM处理．

下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面，它可以用户记录一个list(列表)，定为一个导航窗口在左边或者右边，或者更多的函数你可以想到的．

下一步我们将通过"假代码"让reader看到真代码，下面为推荐:

1、当document第一次载入时，创建dragHelper DIV.dragHelper将给移动的item加阴影．真实的item没有被dragged，只是用了insertBefor和appendChild来移动了，我们隐藏了dragHelper

2、有了mouseDown与mouseUp函数．所有的操作会对应到当到iMouseDown的状态中，只有当mouse左键为按下时iMouseDown才为真，否则为假．

3、我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器．任何参数(containers)将通过CreatedcragContainer进行重组与序列化，这样可以自由的移动．CreateDragContainer函数也将item进行绑定与设置属性．

4、现在我们的代码知道每个item的加入，当我们移动处mouseMove，mouseMove函数首先会设置变量target，鼠标移动在上面的item，如果这个item在容器中(checked with getAttribute):

* 运行一小段代码来改变目标的样式．创造rollover效果

* 检查鼠标是否没有放开，如果没有

o 设置curTarget代表当前item

o 记录item的当前位置，如果需要的话，我们可以将它返回

o 克隆当前的item到dragHelper中，我们可以移动带阴影效果的item.

o item拷贝到dragHelper后，原有的item还在鼠标指针下，我们必须删除掉dragObj，这样脚本起作用，dragObj被包含在一个容器中．

o 抓取容器中所有的item当前坐标，高度/宽度，这样只需要记录一次，当item被drag时，每随mouse移动，每移钟就会记录成千上万次．

* 如果没有，不需要做任何事，因为这不是一个需要移动的item

5、检查curTarget，它应该包含一个被移动的item,如果存在，进行下面操作：

* 开始移动带有阴影的item，这个item就是前文所创建的

* 检查每个当前容器中的container，是否鼠标已经移动到这些范围内了

o 我们检查看一下正在拖动的item是属于哪个container

o 放置item在一个container的某一个item之前，或者整个container之后

o 确认item是可见的

* 如果鼠标不在container中，确认item是不可见了．

Q4: 简单拖拽即生成网页 VvvebJs

VvvebJs是一个开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计，需要的朋友不可错过！

在线演示：