2013-05-27 5 views
0
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<title>Javascript Create Div Element Dynamically</title> 
<style type="text/css"> 
    .ex { 
     width:200px; 
     position: relative; 
     background-color :#CCC; 
     height:150px; 
     padding:10px; 
     margin:5px; 
     left-margin:0px; 
     float :left; 
    } 
    .newdiv { 
     width:800px; 
     height:800px; 
     border:1px solid #000; 
    } 
    #myimage { 
     height: 80; 
     width: 80; 
     top:100; 
     margin:5px; 
    } 
    .border { 
     border:1px solid #000; 
    } 
</style> 
<script> 
    cc = 1; 

    function changeimage() { 
     if (cc == 0) { 
      cc = 1; 
      document.getElementById('myimage').src = "http://forums.hardwarezone.com.sg/images/white_contact.png"; 
     } else if (cc == 1) { 
      cc = 2; 
      document.getElementById('myimage').src = "http://forums.hardwarezone.com.sg/images/yellow_contact.png"; 
     } else if (cc == 2) { 
      cc = 3; 
      document.getElementById('myimage').src = "http://forums.hardwarezone.com.sg/images/red_contact.png"; 
     } else { 
      cc = 0; 
      document.getElementById('myimage').src = "http://forums.hardwarezone.com.sg/images/green_contact.png"; 
     } 
    } 
</script> 
<script type="text/javascript" language="javascript"> 
var i = 0; 

function createDiv() { 


    if (i < 6) { 
     var divTag = document.createElement("div"); 

     divTag.id = "div1"; 

     divTag.setAttribute("align", "left"); 

     divTag.style.margin = "0px auto"; 

     divTag.className = "ex"; 

     divTag.innerHTML = "<img id='myimage' onclick='changeimage()' border='0' src='images/white_contact.png' width='100' height='180' />"; 

     document.body.appendChild(divTag); 
     $("div.newdiv").html("<div class='ex'><img onclick='changeimage()' src='images/white_contact.png'/></div>"); 
    } 

    i++; 
    $(".ex").draggable({ 
     containment: 'parent', 
     cursor: 'pointer', 
     opacity: 0.6 
    }); 
    $(".ex").droppable({ 
     hoverClass: 'border' 
    }); 

} 
</script> 
</head> 
<body> 
    <p align="left"> <b>Click this button to create div element dynamically:</b> 
     <input id="btn1" type="button" value="create div" onClick="createDiv();" /> 
     <div class="newdiv"></div> 
    </p>  
</body> 
</html> 

Это то, что я сделал до сих пор. Как я могу создать все 6 div элементов внутри моего класса #newDIV? Я могу создать только DIV в ящикеКак я могу создать DIV, созданный внутри другого DIV?

Родительское сдерживание не работает, что мне делать? пожалуйста помоги.

Мне нужна 6 ДИВ быть в newDiv тоже draggable ....

+0

Серьезно. В следующий раз, когда вы публикуете, пожалуйста, сначала очистите свою разметку и код. – SomeShinyObject

ответ

1

Да, очень просто на самом деле ... Вы можете вложить свои дивы.

<div class=newdiv><div class=ex></div></div> 

В основном, это раскрой - Первый гнёзд вашего второй ДИВ, а ваши вторые гнезда вашего первое.

Смежные вопросы