拖拽图片到另一个div里

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #taa{width: 300px;height: 300px;background: #DEDEDE;}
    </style>
</head>
<body>
    <!--第一步 设置 拖拽的属性 draggable="true" 绑定drag事件-->
    <img src="img/a.jpg" alt="mytu" draggable="true" id="mytu"/>
    <!--第二步 设置 放置位置 触发事件 dragover-->
    <!--第三步 设置 放置之后 触发事件 dragover-->
    <div id="taa"></div>
</body>
<script src="JS/tuo.js"></script>
</html>

jQuery代码

(function(){
/*------------------节点-------------- */
    var mytu=document.getElementById("mytu");
    var taa=document.getElementById("taa");
/*------------------事件锁定-------------- */

//ondragstart - 用户开始拖动元素时触发
//ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
//ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

 mytu.ondragstart=drag;//拖动什么
 taa.ondragover=dragover;//放到何处
 taa.ondrop=drop;//进行放置
 /*------------------函数------------- */

function drag(ev){
    //通过ondragstart事件存储 当前节点ID到ev.dataTransfer里面
    //数据类型是 "Text",值是可拖动元素的 id ("drag1")。
    ev.dataTransfer.setData("Text",ev.target.id);
    console.log("hollk");

}
function dragover(){
    event.preventDefault();
    //添加一个默认事件的取消 使得drop生效
    console.log("koml");
}
function drop(ev){
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    console.log("huam");
}
})();
    • 在拖动目标上触发事件 (源元素):

      • ondragstart - 用户开始拖动元素时触发
      • ondrag - 元素正在拖动时触发
      • ondragend - 用户完成元素拖动后触发
    • 释放目标时触发的事件:

      • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
      • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
      • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
      • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
时间: 2024-10-10 02:27:55

拖拽图片到另一个div里的相关文章

android项目 之 记事本(14) ----- 手势缩放与拖拽图片

本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 上节实现了查看图片及录音的功能,其中查看图片,可以调用系统的图库来查看图片,也可以自定义Activity来查看图片,今天就在上节的基础上,实现手势缩放与拖拽图片. 想必大家都用过系统的图库,浏览图片时,可以通过手势放大或缩小图片,旋转图片,拖拽图片等功能,我们也为自已定义的查看图片的Activity增加手势缩放与拖拽图片的功能,效果如下图: 上面四幅图中,演示了通过手势(多点触

在viewPager中双指缩放图片,双击缩放图片,单指拖拽图片

我们就把这个问题叫做图片查看器吧,它的主要功能有: 1.双击缩放图片. 2. 双指缩放图片. 3.单指拖拽图片. 为此这个图片查看器需要考虑以下的技术点: 一.双击缩放图片: 1.如果图片高度比屏幕的高度小得多,那么就将图片放大到高度与屏幕高度相等,否则就放大一个特定的倍数. 2.如何判断是否到达这个倍数来停止缩放. 3.判断完且停止放大后,图片可能已经超出了这个倍数需要的大小,如何回归到我们的目标大小. 4.判断完且停止缩小后,图片宽度可能已经小于屏幕宽度,在两边留下了空白,如何重置为原来的大

android 拖拽图片&amp;拖动浮动按钮到处跑

来自老外: import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.os.Bundle; import android.view.MotionEvent ; import android.widget.AbsoluteLayout; import android.widget.Button; public class Drag_And_D

基于html5可拖拽图片循环滚动切换

分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="site-wrapper"> <section id="section-header" data-coloroverlap="dark"></section> <section id="second-phase&qu

C# TreeView 拖拽节点到另一个容器Panel中简单实现

C# TreeView 拖拽节点到另一个容器Panel中简单实现 用了这么久C#拖拽功能一直没有用到也就没用过,今天因为项目需要,领导特地给我简单讲解了下拖拽功能,真是的大师讲解一点通啊.特地写一篇博客记录下,分享给大家!也方便以后自己查看. 1.拖拽功能分析 拖拽功能分析其实就三个字:选-->拖-->放  什么意思,请看下图 本图大概就是将左侧TreeView中的节点拖拽到右侧的Panel控件中,然后根据业务处理想要的效果 拖拽过程分为三步: 将左侧的TreeView的节点选中 拖拽选中的节

div拖动(拖拽图片验证码部分代码)

在underside中拖动redbox,box和redbox的横坐标一致 1 <!doctype html> 2 <html lang="en"> 3 <head> 4   5 <meta charset="UTF-8"> 6 <title>拖拽</title> 7 8 <style> 9 #outside { 10 border: 1px solid #99CC00; 11 bac

Jquery 多行拖拽图片排序 jq优化

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery图片拖动排序代码</title> <style type="text/css"> .item_container{position:relative;height:auto;overflow:hidden;} .item_content ul{list-

图片与文字在div里实现垂直水平都居中

第一种方法,利用盒布局实现   <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; height:100px; background: yellowgreen; display:-moz-box; -moz-box-align:center; -moz-box-pack:center; } </style> <div class="div1"> <i

一个div里有多个a标签,改变a标签的字体颜色方法

<script type="text/javascript">var all=document.getElementById("big");var allDiv=all.getElementsByTagName("div"); for(var i=1;i<allDiv.length+1;i++){allDiv[i-1].onmouseover=function(){var alla=this.getElementsByTagNa