我的网站下有几大板块，板块的左上方有一个移动按钮，请问如何实现可以拖拽div里的一个图片使得整个div移动，drop后自动整理新的界面？ 如下图：
操作：在div 5 左上方的点点位置点击(drag)拖动到div 3的位置后放手（drop）。
希望的结果：div3和div5 交换，或者div5替换了div3的位置，之后的按顺序排列。
请大神越详细越好，最好有例子或者范例。
ããææ¾ï¼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åå«æ¯æå ¥å ç´ çç±»åï¼ææ½è¿ç¨ä¸é¼ æ æ¾ç¤ºçæ ·å¼ï¼ä¸è¿é常å¯ä»¥å¿½ç¥è¿å 个å±æ§ï¼ä¸è¬ç¨ä¸å°ã
æµè§å¨æ¯æ: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åå«æ¯æå ¥å ç´ çç±»åï¼ææ½è¿ç¨ä¸é¼ æ æ¾ç¤ºçæ ·å¼ï¼ä¸è¿é常å¯ä»¥å¿½ç¥è¿å 个å±æ§ï¼ä¸è¬ç¨ä¸å°ã
温馨提示：答案为网友推荐，仅供参考
第1个回答 推荐于2018-03-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的拖拽</title>
<script type="text/javascript" src="
<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">…</span>
<div class="cont">1</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">2</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">3</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">4</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">5</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</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>本回答被网友采纳
<html>
<head>
<meta charset="utf-8">
<title>简单的拖拽</title>
<script type="text/javascript" src="
<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">…</span>
<div class="cont">1</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">2</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">3</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">4</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">5</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</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>本回答被网友采纳
