2 zb51500618 zb51500618 于 2016.04.25 14:24 提问

js图片拖拽匹配求思路

我现在要做一个 商品颜色和图片拖拽匹配的功能 ,就是添加商品的时候让 颜色和 商品图片连接起来

客户要求直接用拖拽 来实现 , 页面上面是图片 下面是颜色名字 。拖动图片到颜色名字上就 让商品颜色图片一 一对应

js 部分我不懂 求拖拽 怎么弄 ,图片拖拽怎么获取拖拽到的颜色名字??
求指点

目前 拖拽后怎么复位 ?有事件么

1个回答

u014481698
u014481698   2016.04.25 15:20

不知道拖拽框架的实现原理,以前用的都是现成的。你这个功能用坐标判定呗。就是处理麻烦些。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
原生js实现照片墙的效果(拖拽图片与另一张图片交换位置)
用到的功能有:布局转换(将float布局转换为定位布局)图片拖拽效果的实现碰撞检测计算两点之间的斜线距离找最小值具体的实现在代码中我都有注释,嗯,直接上代码。注:这里还需要有一个运动框架,需要的请点击js运动框架<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
js实现回放拖拽轨迹从过程上进行分析
今天的记录,记录回放拖拽痕迹,先从过程上进行分析,需要的朋友可以参考下 今天有点小高兴,csdn博客浏览量过万了,在过去还从来没有过这么高的浏览量呢,不得不说,太多时候还是有些矫情,可看到这些鼓励还是忍不住高兴啊,至少,这样让我有一种行内人员的感觉,吾道不孤啊。 闲话不多说,继续今天的记录,记录回放拖拽痕迹,先从过程上进行分析: 1、要实现回放拖拽痕迹,则必须先有记录;
JavaScript拖拽图片一
本文演示如何将一张图片用鼠标拖拽到某个位置。先看html代码: drag demo <div id="icon1" onmousedown="mouseDown(event)" style="left:1px; top: 1px; position: absolute;"> 注意,必须在style中指定三个属性:
JS实现图片拖拽交换效果
JS实现图片拖拽交换效果 听 WEB前端javascript企业实战班 公开课,用JS实现了图片拖拽交换的目的;感谢老师的讲解。 实现要点 鼠标点击onmousedown:获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop); 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clien
JS的平凡之路--简易的图片拖拽排序
由HTML5的拖放API,实现的简易图片拖放效果。 一、HTML5拖放API的知识点  首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置。  拖放API的监听事件如下: dragstart: 源对象拖拽开始; drag: 源对象拖拽的过程中; dragend: 源对象拖拽结束; dragenter:
javascript实现对图片的随意拖拽,放大缩小
【JS】基于javascript实现对图片的随意拖拽,放大缩小         最近写项目的过程中需要对图片进行一个操作,点击之后弹出图片,在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小,双击图片恢复原图!对于我们这样后台程序员而言,这种前台效果实现起来确实有点勉强,在经过半个小时挣扎之后,终于完成效果,发表上来,以供广大后台程序员借鉴吧!
js 图片 拖动 复制
实现效果:1.拖动母图片imgA2.拖动母图片的“复制”后的新图片3.新图片亦支持再次的复制新图片附:下面的示例代码 可以直接拷贝和运行以查看相关效果  -------------------------------------------------js 图片 拖动 复制 var Obj; function DragStart(obj) {     //去年复制部分   //可以在母图片
【JS】原生js实现拖拽功能基本思路
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。 onmousedown:鼠标按下事件onmousemove:鼠标移动事件onmouseup:鼠标抬起事件   拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然,并不是任何时候移动鼠标都要造成
JS实现拖动图片
很实用的技术,可以多看看 event #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; }
原生js实现图片在固定窗口内放缩、拖拽
原生js实现的图片在固定大小窗口内放缩、拖拽