zdying · May 11, 2016 10:53
diff --git a/dragable.html b/dragable.html
 <!DOCTYPE html>
 <html>
 <head lang="en">
    <meta charset="UTF-8">
    <title>Dragable</title>
    <style>
        ul, li{ padding: 0; margin: 0 }
        #source{ width: 140px; overflow: hidden; float:left; margin-left: -10px; }
        .item{ width: 60px; height: 60px; list-style: none; line-height: 60px; font-size: 26px;
            color: white; text-align: center; float: left; margin: 0 0 10px 10px; cursor: move }

        .container{ border: 1px dashed #FF3824; position:relative; width: 130px; height: 130px; padding: 10px; float: left }
        .b-blue{ border-color: #54C7FC }

        .tips{ margin: 5px 0; }

        .green{ background: #44DB5E }
        .blue{ background: #0076FF }
        .red{ background: #FF2851 }
        .orange{ background: #FF9600 }

        #container{ margin: 0 10px 10px 10px; overflow: hidden;}
        #target{ width: 140px; height: 140px; margin-left: -10px; }
        #target1{ width: 140px; height: 140px; margin-left: -10px; }

        .clone:after, .remove:after{ content: ''; display: block; position: absolute; font-size: 30px; top: 60px; height: 30px;
            line-height: 30px; z-index: -1; width: 100%; margin-left: -10px; text-align: center; font-family: monospace; color: darkcyan }
        .clone:after{ content: 'Clone'; }
        .remove:after{ content: 'Remove'; }
    </style>
 </head>
 <body>
 <div class="tips">从蓝色方框拖放到红色方框</div>
 <div class="container b-blue">
    <div id="source">
        <div data-index="0" class="item green" draggable="true"></div>
        <div data-index="1" class="item red" draggable="true"></div>
        <div data-index="2" class="item blue" draggable="true"></div>
        <div data-index="3" class="item orange" draggable="true"></div>
    </div>
 </div>
 <div id="container" class="container clone">
    <div id="target"></div>
 </div>
 <div id="container1" class="container remove">
    <div id="target1"></div>
 </div>
 <script>
    function $(selector){
        return document.querySelector(selector);
    }

    var $source = $('#source'),
        $target = $('#target'),
        $target1 = $('#target1');

    $source.addEventListener('dragstart', function(eve){
        if(eve.target.className.indexOf('item') !== -1){
            eve.dataTransfer.setData('index', eve.target.dataset.index)
        }
    })

    $target.addEventListener('dragstart', function(eve){
        if(eve.target.className.indexOf('item') !== -1){
            eve.dataTransfer.setData('index', eve.target.dataset.index)
        }
    });

    /*
     * 必须要给`#target`绑定`dragover`事件，并且阻止默认事件
     * 否则`drop`事件不会被触发
     */
    $target.addEventListener('dragover', function(eve){
        eve.preventDefault();
    });
    $target.addEventListener('drop', function(eve){
        var transfer = eve.dataTransfer,
            index = transfer.getData('index');

        $target.appendChild($source.querySelector('[data-index="' + index + '"]').cloneNode(true));
        return false
    });

    $target1.addEventListener('dragover', function(eve){
        eve.preventDefault();
    });
    $target1.addEventListener('drop', function(eve){
        var transfer = eve.dataTransfer,
            index = transfer.getData('index');

        $target1.appendChild($source.querySelector('[data-index="' + index + '"]'));
        return false
    });

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Dragable</title>
	<style>
	ul, li{ padding: 0; margin: 0 }
	#source{ width: 140px; overflow: hidden; float:left; margin-left: -10px; }
	.item{ width: 60px; height: 60px; list-style: none; line-height: 60px; font-size: 26px;
	color: white; text-align: center; float: left; margin: 0 0 10px 10px; cursor: move }

	.container{ border: 1px dashed #FF3824; position:relative; width: 130px; height: 130px; padding: 10px; float: left }
	.b-blue{ border-color: #54C7FC }

	.tips{ margin: 5px 0; }

	.green{ background: #44DB5E }
	.blue{ background: #0076FF }
	.red{ background: #FF2851 }
	.orange{ background: #FF9600 }

	#container{ margin: 0 10px 10px 10px; overflow: hidden;}
	#target{ width: 140px; height: 140px; margin-left: -10px; }
	#target1{ width: 140px; height: 140px; margin-left: -10px; }

	.clone:after, .remove:after{ content: ''; display: block; position: absolute; font-size: 30px; top: 60px; height: 30px;
	line-height: 30px; z-index: -1; width: 100%; margin-left: -10px; text-align: center; font-family: monospace; color: darkcyan }
	.clone:after{ content: 'Clone'; }
	.remove:after{ content: 'Remove'; }
	</style>
	</head>
	<body>
	<div class="tips">从蓝色方框拖放到红色方框</div>
	<div class="container b-blue">
	<div id="source">
	<div data-index="0" class="item green" draggable="true"></div>
	<div data-index="1" class="item red" draggable="true"></div>
	<div data-index="2" class="item blue" draggable="true"></div>
	<div data-index="3" class="item orange" draggable="true"></div>
	</div>
	</div>
	<div id="container" class="container clone">
	<div id="target"></div>
	</div>
	<div id="container1" class="container remove">
	<div id="target1"></div>
	</div>
	<script>
	function $(selector){
	return document.querySelector(selector);
	}

	var $source = $('#source'),
	$target = $('#target'),
	$target1 = $('#target1');

	$source.addEventListener('dragstart', function(eve){
	if(eve.target.className.indexOf('item') !== -1){
	eve.dataTransfer.setData('index', eve.target.dataset.index)
	}
	})

	$target.addEventListener('dragstart', function(eve){
	if(eve.target.className.indexOf('item') !== -1){
	eve.dataTransfer.setData('index', eve.target.dataset.index)
	}
	});

	/*
	* 必须要给`#target`绑定`dragover`事件，并且阻止默认事件
	* 否则`drop`事件不会被触发
	*/
	$target.addEventListener('dragover', function(eve){
	eve.preventDefault();
	});
	$target.addEventListener('drop', function(eve){
	var transfer = eve.dataTransfer,
	index = transfer.getData('index');

	$target.appendChild($source.querySelector('[data-index="' + index + '"]').cloneNode(true));
	return false
	});

	$target1.addEventListener('dragover', function(eve){
	eve.preventDefault();
	});
	$target1.addEventListener('drop', function(eve){
	var transfer = eve.dataTransfer,
	index = transfer.getData('index');

	$target1.appendChild($source.querySelector('[data-index="' + index + '"]'));
	return false
	});

	</script>
	</body>
	</html>