js 若 拖动 div中的图片到 div 框架之外的区域 则该图片就隐藏

js 若 拖动 div中的图片到 div 框架之外的区域 则该图片就隐藏

12个回答

如果你的拖动是鼠标按下事件,那么在鼠标松开事件里面添加就行了

逻辑不对啊,你既然是拖动图片到框架外,那么又有谁强制规定你必须松开鼠标,或者继续点击拖动呢。
所以,你需要给你的img设置一个drage事件,在框架外围设置一层虚拟的“护栏”,用于检测,img是否完全被拖出了框架,如果是,只需要settimeout()渐进
的方式去使得display:block,当然也可以用jQuery 的$("img”).hide("slow")进行缓慢的一隐藏,达到一个很好的交互效果。

通过计算框的大小和拖动距离之间的数值关系,然后在加上隐藏效果

jquery动态隐藏显示就可以了

a1133997700
a1133997700 这个是最后一步了。判断位子呢
大约一年之前 回复

你拖动是个事件吧,在事件结束时获取鼠标当前坐标。然后计算鼠标是否在div里面。
js判断鼠标位置是否在div里面

给鼠标一个点击事件,然后再鼠标松开的事件中去判断鼠标坐标位置,不在div中直接隐藏图片就行了

是一个拖动事件,计算好范围,超出这个范围就隐藏

jquery可以的,看看相关框架api

给它一定范围,当鼠标按着拖出去这个范围,鼠标松开即刻隐藏

图片坐标,鼠标事件,点击按钮事件

共12条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js 若 拖动 div中的图片到 div 框架之外的区域 则该图片就隐藏
js 若 拖动 div中的图片到 div 框架之外的区域 则该图片就隐藏n
js拖动div或图片
function small_down(e) {         var obig = document.getElementById("imgArr");         var osmall = document.getElementById("UserImg");                  document.onmousemove = small_move;        
js行拖动,div拖动,图片拖动
可以实现行拖动,div拖动,图片拖动,例子中是行之间的拖动。
点击非此div以外区域则隐藏该div
//点击非弹出框以外区域则隐藏弹出框 $('body').click(function(e) { if(e.target.id != 'chat-main') if($('#chat-main-new').is(':visible')) { //隐藏区域 $('#chat-main').hide(); ...
事件冒泡(点击div外让div消失)
var myDiv = $("#myDiv"); $(function() { $("#btn").click(function(event) { // showDiv();//调用显示DIV方法 $(myDiv).toggle(); $(document).one("click", function() { //对docum...
点击div之外的地方,div隐藏
对于一个div1,想要在点击div1的父元素 或者body元素的时候,使div1隐藏 文档 *{ margin:0; padding:0; } .div{ width:300px; height:300px; position:absolute; top:50px; left:100px; background
js中隐藏div
点击一个按钮,隐藏一个div。然后我想在div隐藏的时候有点渐渐变化的效果,就是不要直接一下div就不见了的那样。
js拖动div并拖动DIV的大小
js拖动div并拖动DIV的大小,js拖动div并拖动DIV的大小
js 点击除此div之外的地方隐藏
$(".times").bind("click", function(e) {      var target = $(e.target);      if(target.closest(".photo img").length == 0) {    layer.closeAll();      }})
点击div以外的其他区域,div隐藏
HTML:   js: $(document).click((event) => { event.stopPropagation(); if (!$('.doSure').is(event.target) && $('.doSure').has(event.target).length === 0) { $('.doSure').hide();
jquery实现点击指定div外区域隐藏该div
jquery实现点击指定div外区域隐藏该div
点击div外面区域div隐藏
HTML: <div class="mod"> <div>child</div> </div> js: <script type="text/javascript">     $(function(){ $(document).bind("click",function(e){      ...
图片和div
我有一张图片,想在图片的固定位置插一些文字,有没有实现的例子
js实现的点击div区域外隐藏div区域
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
div中图片水平垂直居中
样式部分:.middle-out{width: 600px; height: 385px; position: relative; display: table-cell;vertical-align: middle; text-align:center;border: 1px solid #f00;}.middle-in{position: static;*position:absolute;t
图片在div中垂直居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
div中的图片居中
问题摘要:如何让一个div中的图片居中?先看jsp代码:<div class="png_div"> <img alt="" src="vc4/img/logotitle.png"> </div>现在给图片所在的div添加样式.png_class{ width:200px; height:40px; display: table-cell; ..
图片水平居中——div中
div中的图片水平居中,必须要给div固定宽度和高度,然后才可以使用 align: center; 使该div中的东西全部居中。 例如下面的代码: <div class="login_code" style="width:320px;height:54px;align: center;"> <img id="img" src="<%=path%>/co...
拖动div到另一个div中
拖动div,然后在另一个div显示被拖进div的id.
js导出div为图片
<div id="tbl_exception"> <p style=" color: chartreuse;">你的名字<span style='color:aqua; text-shadow:0 0 2px blue;'>aaa</span></p> </div> <a id="Down"> <img id="img"
js实现div拖动
纯js实现多个div在页面上,随意的拖动!
js。可拖动div
可以拖动的div,还有坐标,快进后退按钮
JS可拖动的DIV
JS 控制兼容 IE 火狐 谷歌 等浏览器
js div拖动完美版
div拖动范围限制,纯js事件绑定 附详细解释
js div拖动问题
rn rn rnrn rn rn rn rn rn rn rn rn rn rn rn rn rn rnrnrnrnmoveDiv.js:代码如下rnfunction handle(event,obj)rnrn var currentDiv = document.getElementById("layCropper");rn var mousePos = mouseRelativePosition(event,obj);rnrn var mx = mousePos.x;rn var my = mousePos.y;rn var xx = mouseAbsolutePostion(event).x;rn var yy = mouseAbsolutePostion(event).y;rn //alert(typeof mx);rn //alert(typeof xx);rn //获得时间目标元素rn document.getElementById("x").value = mx;rn document.getElementById("y").value = my;rn document.getElementById("mx").value = xx;rn document.getElementById("my").value = yy;rnrn//得到鼠标的绝对位置坐标(body)rnfunction mouseAbsolutePostion(evt)rnrn evt = event ? event : window.event;rn return x:evt.clientX,y:evt.clientY;rnrn//获得鼠标的相对位置坐标(div)rnfunction mouseRelativePosition(evt,curObj)rnrn evt = event ? event : window.event;rn var p = curObj;rn var left = p.offsetLeft + p.offsetParent.offsetLeft;rn var top = p.offsetTop + p.offsetParent.offsetTop;rn if(evt.pageX || evt.pageY)rn rn return x:evt.pageX,y:evt.pageY;rn rn return rn x:evt.clientX + document.body.scrollLeft - document.body.clientLeft - left,rn y:evt.clientY + document.body.scrollTop - document.body.clientTop - toprn ;rnrnrnrn为什么这里的不能进行mx+xx,my+yy ???????rn高手能不帮忙给个层的多动例子,尽量简单,注释详细的,谢谢!!!
js如何设置 DIV层中的图片 部分区域显示
js如何设置 DIV层中的图片 部分区域显示rn其余部分 显示下层内容 ,但点击 非显示区域,获得的对象仍是 div层对象
js中div的显示和隐藏
一.方式1:隐藏后仍占有页面空间,显示空白     div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白     style=&quot;visibility: none;&quot;      //在Div中设置style属性     document.getElementById(&quot;typediv1&quot;).style.visibility=&quot;hidden&quot;;//隐藏     documen...
可以拖动的div,div
可以拖动的div,div,table,tr,td
拖动div 拉伸div
纯js版本的拖动div 拉伸div 复用拖拽函数 复用改变大小函数
angularjs 点击div外面,隐藏该div
一般界面上都会有工具,点击就会弹出一下界面显示对应的选项,现在想实现,弹出的界面,点击外面的区域,隐藏掉该界面,主要采用ng-show属性和事件冒泡阻止的知识,如下过程:       1.界面上的布局文件:         工具 导出编号姓名 导出就诊申请单 师职医疗证
点击空白区域,div隐藏
当我点击查询条件时,查询条件div显示出来 如下 当我再点击空白区域的时候,查询条件隐藏。 这里面主要是用到一个防止冒泡的功能 $(".rightMenuAlert").click(function(e){ $(".cxtj").animate({right:'0px'},"500"); var ev = e || window.event;                
jquery实现点击div空白处隐藏该div
标签: $(document).bind("click",function(e){ var target = $(e.target); if(target.closest("#div1").length == 0){ $("#div1").hide(); } });
JS 隐藏显示DIV
我想实现的功能:rnrn通过JS,点击一个按钮rn自动弹出一个DIV在显示器的中央,里面的内容写“请稍后。。。”rn并且这个页面的所有信息都不能被点击rn过了3秒,DIV自动关闭rnrnrn哪位知道怎么写的帮我解决下
js隐藏div
rnrn rn rn rn rnrn哪里不对啊
点击其他区域,隐藏div
&amp;lt;div  id='test'&amp;gt;&amp;lt;/div&amp;gt; 点击其他区域关闭这个div &amp;lt;script type=&quot;text/javascript&quot;&amp;gt;  $(document).bind('click',function(e){  var e = e || window.event; //浏览器兼容性  var elem = e.target || e.srcElemen...
js div 显示 隐藏
document.getElementById('qq').style.display='block' document.getElementById('qq').style.display='none'
JS显示和隐藏div
JS显示和隐藏div 接下来我们使用Visual Studio这个软件来写一个的方法,我们可以使用这种写法写一个小案例来实现一个div里面显示和隐藏的效果。 我们先看一下html的页面截图: 首先我们先在html页面上建立一个input标签然后在给他一个id,接着给他一个div设置一个宽高100像素的正方形。然后接着我们就要写一下script的js代码。 看一下js的代码截图: 我们可以看到2...
js 与div 鼠标拖动div 为啥div的样式放到css文件里面就拖动不了
rn rn rn rn rn qq917722613rn rn rn rn 这是标题rn 这是内容rn rn rn rnrn当把样式放到 style后面的时候 运行页面就会成功,这是为啥呢。 。。
js如何设置DIV层中的图片
http://diy.kadang.com/diy/diy34.htmlrn如同这个网页的JS显示图层效果怎么写?rn就是选择一张图片,作为图层覆盖到另一张特定图片上
求一个在div内拖动图片的代码
需求是这样的,在一个div内,显示一个图片rnrndiv大小位置固定,图片的大小肯定超过div,想实现拖动图片的功能,超过div边缘的部分则不显示,如何实现?rn只需要管ie就行了,代码越简单越好,不考虑firefox了rnrncss新手,不太明白,刚刚实现了一个div在网页内的拖动,但是改来改去改不到这个效果rnrn
相关热词 c# 去空格去转义符 c#用户登录窗体代码 c# 流 c# linux 可视化 c# mvc 返回图片 c# 像素空间 c# 日期 最后一天 c#字典序排序 c# 截屏取色 c#中的哪些属于托管机制

相似问题

3
javascript编程语言怎么实现拖动div并且保存div的布局
3
video.js插件设置的远程地址上的视频,在谷歌浏览器上进度条不能拖动,一拖动就重新播放
1
多个div浮窗的只有一个能移动的问题
1
高德 JS API UI组件 拖拽选址 获取不到位置信息
0
idea拖拽到副屏 窗口消失了怎么办
0
js中当按下鼠标右键光标移出浏览器后,如何获触发mousemove事件?
2
QListWidget中的Item拖动到QTableWidget上面,将Item中的数据中的数据在Tablewidget上生成四个按钮
0
jquery项目中使用高德地图,拖动过程中,地图中的地标文字会跳闪
0
C#(WPF) RichTextBox如何禁止拖动里面的图片
0
用jquery实现div之间的连线,连好之后可随意拖动,线跟着动
4
jquery click事件,点击(不松鼠标)并拖动到区域外之后,无法触发click事件,求解决?
0
我在实现RecycleView拖拽的功能之后,按项目要求要把完成拖拽之后所有item的当前位置上传后台重新排序
0
求助关于jquery给图片标记的定位问题
0
静态页面使用video.js和iscroll.js插件,视频播放无法调节音量
0
高德地图,js api中,有能实现拖动圆改变圆的大小吗?
0
echarts 拖拽曲线图问题
1
如何做HTML5拖拽题目?
1
android studio 3.4版本,找不到可以直接拖拽的EditText,是不是必须自己手动写代码?
0
SurfaceView绘制图片 拖动时画面有闪烁
1
微信小程序,长按拖拽合并如何实现?