可以拖动的多张图片

最新推荐文章于 2021-03-26 16:38:50 发布
最新推荐文章于 2021-03-26 16:38:50 发布
阅读量651 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014339882/article/details/51133505
版权
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---　可以拖动的多张图片</title>
</head>


<body>


<script language="JavaScript">
//Pre-load your images here.
imgs=new Array("images/k0212.gif","images/PHOT046.JPG","images/c0407.jpg","images/e.jpg","images/developer.gif")


//Alter nothing past here!
load=new Array()
for(i=0; i < imgs.length; i++){
 load[i]=new Image();
 load[i].src=imgs[i];
}
var ns=(document.layers);
var ns6=(document.getElementById&&!document.all);
var ie=(document.all);
var n=imgs.length;
var y=null;
var x=null;
var z=null;
var w=null;//Alternate id. Not used for this script.
if (ns||ns6){
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.releaseEvents(Event.MOUSEMOVE);
}
if (ns){window.οnmοusedοwn=down;window.οnmοuseup=up}
if (ie||document.getElementById){document.οnmοusedοwn=down;document.οnmοuseup=up}
function down(e){
if (ns){
 window.οnmοusemοve=move;
 if (document.layers['pics'+e.target.name]){
 z=document.layers['pics'+e.target.name];
 y=e.layerY;
 x=e.layerX;
 document.layers['pics'+e.target.name].zIndex=n++;
 }
else {return true}
w=z.name.charAt(z.name.length-1);
}
if (ie && window.event.srcElement.parentElement){
 document.οnmοusemοve=move;
 if  (window.event.srcElement.parentElement.id.indexOf("pics") != -1){
 z=window.event.srcElement.parentElement; 
 y=window.event.offsetY;
 x=window.event.offsetX;
 w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1); 
 window.event.srcElement.parentElement.style.zIndex=n++;
 }
}
if (ns6){
 document.οnmοusemοve=move;
 if  (e.target.parentNode.id.indexOf("pics") != -1){
 z=e.target.parentNode.style;
 x=e.clientX - parseInt(z.left);
 y=e.clientY - parseInt(z.top);
 w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1);
 z.zIndex=n++;  
 } 
}
return false;
}
function move(e){
if (ns && z){z.left=e.pageX-x;z.top=e.pageY-y;}
if (ns6 && z){z.top=parseInt(e.clientY)-y;z.left=parseInt(e.clientX)-x}
if (ie && z){z.style.posLeft=window.event.clientX-x;z.style.posTop=window.event.clientY-y}
return false;
}
function up(e){
if (ie||ns6)document.οnmοusemοve=null;
if (ns)window.οnmοusemοve=null;
z=null;
}
//-->
</script>


<div id="pics0" style="position:absolute;top:10px;left:10px;cursor:move">
<img src="images/k0212.gif" name="0">
</div>


<div id="pics1" style="position:absolute;top:100px;left:10px;cursor:move">
<img src="images/PHOT046.JPG" name="1">
</div>


<div id="pics2" style="position:absolute;top:190px;left:10px;cursor:move">
<img src="images/c0407.jpg" name="2">
</div>


<div id="pics3" style="position:absolute;top:280px;left:10px;cursor:move">
<img src="images/e.jpg" name="3">
</div>


<div id="pics4" style="position:absolute;top:370px;left:10px;cursor:move">
<img src="images/developer.gif" name="4">
</div>






 




</body>


</html>
TOP-尼古丁味道
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用datatransfer拖拽实现多张图片预览
GaHoOo的博客
09-14 717
html5从一开始就给予开发者很多的期待，给开发者提供了众多新的API，不用像以前那样为了实现某个功能而写很多的代码。在以前，如果要实现图片的预览会怎么做呢，我上网科普得知了不少，鉴于安全的原因，web端的JS是不能直接读取文件的本地真是路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现基本的图片预览。 fileReader:现在html5提供的API不再让图片预览那么...
js实现图片的拖动
sh2001824的博客
07-19 3508
js实现图片拖拽
用鼠标在屏幕上拖动多张图片
無
08-26 1391
以前看过一段代码，说的是用鼠标在屏幕上拖动图片，但这段代码的扩展性不是很好，拖动任何位置，图片都会移动，且只能拖动一张图片。代码如下：var Tu : Texture2D;private var first = Vector2.zero;private var second = Vector2.zero;private var tempx : float = 0;private var tempy
PYQT5+图片拖拽
01-16
python2，3下都能运行，看到界面选一个文件夹，文件夹下包括一个文件夹，且其下有图片，代码不易，好好珍惜！
vue+sortable实现多张图片拖拽排序
weixin_44698992的博客
03-26 802
vue+sortable实现图片可拖拽换位，并且数据跟着改变 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录vue+sortable实现图片可拖拽换位，并且数据跟着改变前言一、实现效果二、使用步骤总结 前言 本人实现的方式是通过引入的方式实现，如果用脚手架的方式应该也差不多 一、实现效果 二、使用步骤 1、获取到展示图片的最外层节点，我的最外层节点为ref=“foo” 2、如下图代码 实现的方法实际上就是对数组的一个操作，oldIndex是移动之前的下标，newIndex
jQueryr多张图片批量上传代码
06-24
jQueryr多张图片批量上传代码是一款支持多张图片批量上传，可拖动图片上传，也可以拖动进行图片排序上传，内含php文件，演示暂不支持PHP，请下载测试。
avalon js实现仿google plus图片多张拖动排序附源码下载
10-23
主要介绍了avalon js实现仿google plus图片多张拖动排序附源码下载的相关资料,需要的朋友可以参考下
jQueryr多张图片批量上传特效代码
03-20
jQueryr多张图片批量上传代码是一款支持多张图片批量上传，可拖动图片上传，也可以拖动进行图片排序上传，内含php文件，演示暂不支持PHP，请下载测试。
Android 多点触控，多张图片拖拽，缩放，旋转
05-27
详情请访问 http://blog.csdn.net/pkxutao/article/details/46048611
jQueryr多张图片批量上传代码.zip
07-11
jQueryr多张图片批量上传代码是一款支持多张图片批量上传，可拖动图片上传，也可以拖动进行图片排序上传，内含php文件，演示暂不支持PHP，请下载测试。
拖拽上传图片(可多张)
spfLinux的博客
12-26 1349
upload.html: Document a{ cursor: pointer; } .d1{ width: 80%; height: 200px; background: #ddd; } .d2{ display: none; } #d1_content{ width: 75%; height: 200px
CImage实现多张图像的查看以及图像自由缩放，拖动
像个博客
09-14 2050
CImage提供了增强的位图支持，包括加载和保存 JPEG、 GIF、 BMP 和可移植网络图形 (PNG) 格式的图像的能力。为加载图像提供了更方便，更多样的选择，本文以CImage为核心实现多张图像的查看以及图像缩放，拖动。 1.载入图像 void XXXDlg::OnDropFiles(HDROP hDropInfo) { // TODO: 在此添加消息处理程序代码和/或调用默认...
h5拖拽api (drag,drop)实现多图片拖动排序，兼容移动端
kellywong的博客
04-08 6609
需求：h5页面实现允许多张图片上传并且支持对图片长按拖动排序，由于我们的h5页面在pc端和移动端都有入口，因此拖动排序需要兼容pc和移动端。这里不涉及图片上传，只涉及对上传的图片进行拖动排序。 在开发前需要知道，h5拖拽api(drag/drop)基本只支持pc端（但是，我在实际开发中，发现很多安卓手机也支持这个api, ios端不支持），因此我们如果使用拖拽api，需要做移动端的兼容。如果完全自...
HTML5之鼠标拖动图片
热门推荐
互动人生
03-18 1万+
HTML5 drag image in page - cheungmine #_outerDiv{ height:150px; width:500px; border:1px solid black; position:relative; overflow:hidden; } function g
android长按拖动拖拽 多张
最新发布
06-10
您好，针对您的问题，我理解您想实现在 Android 应用中，用户可以通过长按某个元素并拖动，实现多张图片的拖拽和拖放。我可以为您提供以下思路和代码示例： 首先，您需要为每一张图片设置一个触摸事件，以便用户可以通过长按并拖动图片。例如，在您的布局文件中，可以为每个图片添加如下代码： ```xml <ImageView android:id="@+id/image1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/image1" android:tag="draggable" android:longClickable="true" android:onLongClick="onLongClickImage" /> ``` 其中，`android:tag="draggable"` 表示该元素可以被拖拽，`android:longClickable="true"` 表示该元素可以被长按，`android:onLongClick="onLongClickImage"` 表示当用户长按该元素时，会调用 `onLongClickImage` 方法。 接下来，您需要实现 `onLongClickImage` 方法，以便能够在用户长按图片时启动拖拽事件。例如，可以使用 `View.OnLongClickListener` 接口来实现该方法： ```java public class MainActivity extends AppCompatActivity implements View.OnLongClickListener { private ImageView mSelectedImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 为每个图片添加长按事件 findViewById(R.id.image1).setOnLongClickListener(this); findViewById(R.id.image2).setOnLongClickListener(this); findViewById(R.id.image3).setOnLongClickListener(this); } @Override public boolean onLongClick(View v) { // 记录选中的图片 mSelectedImage = (ImageView) v; // 启动拖拽事件 View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(v); v.startDragAndDrop(null, shadowBuilder, null, 0); return true; } } ``` 在这个例子中，当用户长按某个图片时，会记录选中的图片并启动拖拽事件。拖拽事件使用 `View.startDragAndDrop` 方法来启动，并使用 `View.DragShadowBuilder` 创建一个拖拽的阴影。 最后，您需要实现 `View.OnDragListener` 接口来处理拖拽事件。例如，可以使用以下代码来实现： ```java public class MainActivity extends AppCompatActivity implements View.OnLongClickListener, View.OnDragListener { private ImageView mSelectedImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 为每个图片添加长按事件 findViewById(R.id.image1).setOnLongClickListener(this); findViewById(R.id.image2).setOnLongClickListener(this); findViewById(R.id.image3).setOnLongClickListener(this); // 设置拖拽事件 findViewById(R.id.container).setOnDragListener(this); } @Override public boolean onLongClick(View v) { // 记录选中的图片 mSelectedImage = (ImageView) v; // 启动拖拽事件 View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(v); v.startDragAndDrop(null, shadowBuilder, null, 0); return true; } @Override public boolean onDrag(View v, DragEvent event) { switch (event.getAction()) { case DragEvent.ACTION_DRAG_STARTED: // 拖拽事件开始，返回 true 表示可以接收拖拽事件 return true; case DragEvent.ACTION_DRAG_ENTERED: // 拖拽事件进入容器，改变容器的背景色 v.setBackgroundColor(Color.YELLOW); break; case DragEvent.ACTION_DRAG_EXITED: // 拖拽事件离开容器，恢复容器的背景色 v.setBackgroundColor(Color.TRANSPARENT); break; case DragEvent.ACTION_DROP: // 拖拽事件释放，将图片从原位置移动到容器中 ViewGroup viewGroup = (ViewGroup) mSelectedImage.getParent(); viewGroup.removeView(mSelectedImage); ((ViewGroup) v).addView(mSelectedImage); break; case DragEvent.ACTION_DRAG_ENDED: // 拖拽事件结束，恢复容器的背景色 v.setBackgroundColor(Color.TRANSPARENT); break; } return true; } } ``` 在这个例子中，当用户将图片拖拽到容器中时，会将图片从原位置移动到容器中。您可以根据需要修改代码，实现更复杂的拖拽和拖放功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值