如何使用HTML5+CSS3+jquery 实现用户拖拽自定义界面 50

我的网站下有几大板块，板块的左上方有一个移动按钮，请问如何实现可以拖拽div里的一个图片使得整个div移动，drop后自动整理新的界面？如下图：操作：在div5左上方的点... 我的网站下有几大板块，板块的左上方有一个移动按钮，请问如何实现可以拖拽div里的一个图片使得整个div移动，drop后自动整理新的界面？如下图：

操作：在div 5 左上方的点点位置点击(drag)拖动到div 3的位置后放手（drop）。

希望的结果：div3和div5 交换，或者div5替换了div3的位置，之后的按顺序排列。

请大神越详细越好，最好有例子或者范例。展开

 我来答

2个回答

#合辑# 面试问优缺点怎么回答最加分？

匿名用户
2015-06-17

展开全部

　　拖放（Drag 和 drop）是 HTML5 标准的组成部分。
浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
　　被拖元素，dragElement :
(1)添加事件：ondragstart
(2)添加属性：dragable
　　放置元素，dropElement:
1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来说明。
　　2、页面上元素间的拖放
下面用个小例子，div间的拖放来展示，各个事件如何被触发：
　　系统中选择的一个或多个文件拖入该div中，files中会存储拖入文件的信息，然后我们通过file可以得到文件的类型，长度，内容然后实现上传。
　　3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。
　　4、types,effectAllowed和dropEffect分别是拖入元素的类型，拖拽过程中鼠标显示的样式，不过通常可以忽略这几个属性，一般用不到。

已赞过 已踩过<

评论收起

遥遥无期Li
推荐于2018-03-08 · TA获得超过497个赞

知道小有建树答主

回答量：544

采纳率：56%

帮助的人：241万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>简单的拖拽</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
*{ padding:0;margin:0;font-size:12px; }
	.list{ width:360px;height:230px;background-color:#eee;margin:24px auto; }
	.list .listview{ width:98px;height:98px;border:1px solid #555;margin:10px 0 0px 15px;float:left;position:relative;user-select:none; }
	.list .spots{ padding:0 5px;cursor:pointer;position:absolute;left:0;top:0; }
	.list .cont{ position:absolute;right:5px;top:0; }
</style>
</head>
<body>
<div class="list">
	<div class="listview">
		<span class="spots" draggable="true">&#8230;</span>
		<div class="cont">1</div>
	</div>
	<div class="listview">
		<span class="spots" draggable="true">&#8230;</span>
		<div class="cont">2</div>
	</div>
	<div class="listview">
		<span class="spots" draggable="true">&#8230;</span>
		<div class="cont">3</div>
	</div>
	<div class="listview">
		<span class="spots" draggable="true">&#8230;</span>
		<div class="cont">4</div>
	</div>
	<div class="listview">
		<span class="spots" draggable="true">&#8230;</span>
		<div class="cont">5</div>
	</div>
	<div class="listview">
		<span class="spots" draggable="true">&#8230;</span>
		<div class="cont">6</div>
	</div>
</div>
</body>
<script type="text/javascript">
$(function(){
	$('.spots').bind('dragstart', function(e){
		e.originalEvent.dataTransfer.setData( "m_data", $(this).parent().index() );
	});
	$('.list').bind('dragover', function(e){
		e.preventDefault();
	});
	$('.listview').bind('drop', function(e){
		e.preventDefault();
		var p_index = e.originalEvent.dataTransfer.getData("m_data");
		var p_index_this = $(this).index();
		if( p_index > p_index_this ){
			$('.listview').eq(p_index_this).before($('.listview').eq(p_index));
		}else{
			$('.listview').eq(p_index_this).after($('.listview').eq(p_index));
		}
	});
});
</script>
</html>

本回答被网友采纳

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何使用HTML5+CSS3+jquery 实现用户拖拽自定义界面 50

其他类似问题

为你推荐：