基于jquery插件实现拖拽删除图片功能
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码，供大家参考，具体内容如下
实现以下效果
完全拖出这个层，图片会消失，否则图片会回到原来的位置
<html>
<head>
<title></title>
<style type="text/css">
#mydiv{ width:900px; background-color:#444; border:1px solid red}
#mydiv2{ width:900px;; border:1px solid red}
img{ width:200px; height:200px;}
ul{ list-style-type:none;}
ul li{ display:inline;}
</style>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<!-- <script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>-->
<!-- 或1.8用以下四个-->
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//存储的是被拖动的图片的初始坐标
var startleft = 0;
var starttop = 0;
$('img').draggable({
start: function () {
//为两个变量设置被拖动图片的初始坐标
startleft = $(this).offset().left;
starttop = $(this).offset().top;
},
stop: function () {
if ($(this).offset().left > $('#mydiv').offset().left + $('#mydiv').width() || $(this).offset().top > $('#mydiv').offset().top + $('#mydiv').height()) {
$(this).remove();
}
else {
//复位
$(this).offset({
left: startleft,
top: starttop
})
}
}
})
})
</script>
</head>
<body>
<div id="mydiv">
<ul>
<li><img src="images/img01.jpg" /></li>
<li><img src="images/img02.jpg" /></li>
<li><img src="images/img03.jpg" /></li>
<li><img src="images/img04.jpg" /></li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。
-
本文向大家介绍基于jQuery实现拖拽图标到回收站并删除功能，包括了基于jQuery实现拖拽图标到回收站并删除功能的使用技巧和注意事项，需要的朋友参考一下 本文利用jQuery实现一个拖拽删除桌面小图标的功能，使用起来就像操作系统的回收站一样，我们只需要拖动应用图标至垃圾箱即可删除这个图标，分享给大家，具体实现方法如下 运行效果图： 引入核心文件 这里需要引入jquery，jquery ui，与j
-
本文向大家介绍基于Vue实现拖拽功能，包括了基于Vue实现拖拽功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue实现拖拽功能的具体代码，供大家参考，具体内容如下 效果图： HTML代码： JS代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍js实现拖拽上传图片功能，包括了js实现拖拽上传图片功能的使用技巧和注意事项，需要的朋友参考一下 直接把本地图片拉到你设定的图片上传成功后的位置，就ok了，具体代码如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery插件实现文件上传功能（支持拖拽），包括了jQuery插件实现文件上传功能（支持拖拽）的使用技巧和注意事项，需要的朋友参考一下 先贴上源代码地址，点击获取。然后直接进入主题啦，当然，如果你觉得我有哪里写的不对或者欠妥的地方，欢迎留言指出。在附上一些代码之前，我们还是先来了解下，上传文件的时候需要利用的一些必要的知识。 首先我们要说的就是FileReader对象，这是一个H
-
本文向大家介绍vue插件draggable实现拖拽移动图片顺序，包括了vue插件draggable实现拖拽移动图片顺序的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法，供大家参考，具体内容如下 例如图片显示的这种图片列表、商品展示需要拖动图片改变顺序，vuedraggable可以实现拖拽。 首先， 然后在组件中引入， 定义组件
-
pre { white-space: pre-wrap; } jQuery EasyUI 插件 通过 $.fn.draggable.defaults 重写默认的 defaults。 用法 通过标记创建可拖动（draggable）元素。 <div id="dd" data-options="handle:'#title'"> <div id="title">title</div> </di