新人求助！如何实现填充多个div？

2015-01-19 07:07:43 265 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

js 动态向DIV中填充数据今天下午考六级，看了一上午的作文，终于看完了10篇，现在写一下自己的博客。从数据库当中读出数据来，然后用js 填充到Div快中。其中前台的ＤＩＶ块为：div id="Div8" class="module listColor"> div class="head"> 阅读详情

红色div拖动到左边的div中可以填充背景色，但是一次只能填充一个。
现在创建了一个下拉列表可以选择填充的个数，拖动到对应div处，依次填充对应的div，请问该怎么实现啊？



<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link href="D:/DHC/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

    <script src="D:/DHC/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="D:/DHC/lib/ligerUI/js/core/base.js" type="text/javascript"></script>

    <script src="D:/DHC/lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>

	<style type="text/css">      

        .box

        {

            width: 80px;height: 30px;border-style:solid;border-width:1px;float: left;margin: 5px;

        }

        .receive

        { width: 150px; height: 50px; border-style:solid;border-width:1px;margin: 4px; 

        }

        

    </style>	

    <script type="text/javascript">

	//显示select对应个数div

	function showDiv(){	

		//将div内的元素清空

		document.getElementById("sel_div").innerHTML="";

		//根据option的值创建div

		var n=document.getElementById("sel").value;

		for(var i=1;i<=n;i++){

			var d=document.createElement("div"); 

			d.style.background = "red";

			d.style.width="80px";

			d.style.height="30px";

			d.style.margin="5px";

			d.className="box";

			d.setAttribute("id",i);

			document.getElementById("sel_div").appendChild(d);

		}

	}

	//拖动

    $(function ()

        {

            $('.boxx,.box,.receive').ligerDrag({ proxy: 'clone', revert: true, receive: '.receive',

                onStartDrag: function ()

                {

                    this.set({ cursor: "not-allowed" });

                },

                onDrop: function (receive, source, e)

                {

                    if (!this.proxy) return;

                    this.proxy.hide();

                    var bgcolor = this.proxy.css('backgroundColor');

                    if (this.target.hasClass("receive"))

                    {

                        this.target.css("backgroundColor", $(receive).css("backgroundColor"));

                    }

                    $(receive).css("backgroundColor", bgcolor);

                }

            });

        });     

    </script>

 </head>

<body style="padding: 10px">

	<div  style=" position:absolute;border-style:solid;border-width:1px;left:250px;top: 100px;"> 

		<select id="sel" onchange="showDiv()">

			<option value="1">1</option>

			<option value="2">2</option>

			<option value="3">3</option>

			<option value="4">4</option>

			<option value="5">5</option>

			<option value="6">6</option>

			<option value="7">7</option>

			<option value="8">8</option>

			<option value="9">9</option>

			<option value="10">10</option>

		</select>

	</div>



    <div style=" position:absolute; top:160px; ">

        <div id="1" class="receive">1</div>

        <div id="2" class="receive">2</div>

		<div id="3" class="receive">3</div>

		<div id="4" class="receive">4</div>

		<div id="5" class="receive">5</div>

		<div id="6" class="receive">6</div>

		<div id="7" class="receive">7</div>

		<div id="8" class="receive">8</div>

		<div id="9" class="receive">9</div>

		<div id="10" class="receive">10</div>

		<div id="11" ></div>

    </div>



	<div id="show" class="box" style=" position:absolute;left:350px;top: 160px;background: red;"></div>

	<div id="sel_div" class="boxx" style=" position:absolute;left:350px;top: 200px;width: 80px;"></div>

	<div  class="box" style=" position:absolute;left:450px;top: 160px;"></div>

</body>

</html>