만들 크기 조정이 가능한 동적으로 추가 사업부

Question

나는 사업부 콘텐츠라는이

<div id="content"> 
</div> 

I가 다른 사업부 호출 악기

<div id="instruments"> 

</div> 

나는 그것이 사업부라는 내용에 추가 할 수있는 계기를 클릭하면 . 나는이 일을했다. 하지만 이동 된 div (악기)는 크기를 조정할 수 있어야합니다. 나는 jquery-ui.js를 사용해 보았지만 실패했다. 나는 무엇을 할 것인가? 당신은 당신이 대신 .on()의 .one()을 가지고 있고 당신이 당신의 HTML에 id="instruments"를 사용하여 자바 스크립트 구문 오류가

<script> 
var steps_array = []; 
$(".instruments").one("click", function(){ 
     $("#content").append($(this)); 
     $(this).css({"position":"relative", "top":"10px"}); 
     $(this).addClass('resizable'); 

    steps_array.push({ 
     id : $(this).attr('id'), 
     height: $(this).height(), 
     width: $(this).width(), 
     positionX: $(this).position().left, 
     positionY: $(this).position().top 
    }); 

     $(this).draggable({ 
      containment: "parent", 
     drag: function() { 
      $("#x-value").html($(this).position().top); 
      changePos ($(this).attr('id'), $(this).position().left , $(this).position().top); 
      console.log("Edited : "+$(this).attr('id')); 

     }  
     }); 

$(".resizable").resizable();  
    }); 


    $(".btn").click(function(){ 
     print_array_object(steps_array); 
    }); 
     function print_array_object(array_name){ 
     $.each(array_name, function(index, val) { 
      console.log(val.id); 
      console.log(val.height); 
      console.log(val.width); 
      console.log(val.positionX); 
      console.log(val.positionY); 
     }); 
    } 

    function changePos(id, newX , newY) { 
     for (var i in steps_array) { 
     if (steps_array[i].id == id) { 
      steps_array[i].positionX = newX; 
      steps_array[i].positionY = newY; 
      break; //Stop this loop, we found it! 
     } 
     } 
    } 
    </script> 

Answer 1

때해야 노호 스크립트입니다 class="instruments" 또한

당신이 연결되어 있는지 확인 :

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

var steps_array = []; 
 
$(".instruments").on("click", function(){ //here you had ".one()" instead of .on() 
 

 
\t $("#content").append($(this)); 
 
\t $(this).css({"position":"relative", "top":"10px"}); 
 
\t $(this).addClass('resizable'); 
 

 
    steps_array.push({ 
 
     id : $(this).attr('id'), 
 
     height: $(this).height(), 
 
     width: $(this).width(), 
 
     positionX: $(this).position().left, 
 
     positionY: $(this).position().top 
 
}); 
 

 
$(this).draggable({ 
 
\t containment: "parent", 
 
\t drag: function() { 
 
\t $("#x-value").html($(this).position().top); 
 
\t changePos ($(this).attr('id'), $(this).position().left , $(this).position().top); 
 
\t console.log("Edited : "+$(this).attr('id')); 
 
\t } 
 
}); 
 

 
$(".resizable").resizable();  
 
}); 
 

 

 
$(".btn").click(function(){ 
 
\t print_array_object(steps_array); 
 
}); 
 
function print_array_object(array_name){ 
 
\t $.each(array_name, function(index, val) { 
 
\t \t console.log(val.id); 
 
\t \t console.log(val.height); 
 
\t \t console.log(val.width); 
 
\t \t console.log(val.positionX); 
 
\t \t console.log(val.positionY); 
 
\t }); 
 
} 
 

 
function changePos(){ 
 
    //not sure what this does but added to avoid errors 
 
    }

#content{ 
 
    width:300px; 
 
    height:300px; 
 
    background-color:#cccccc; 
 
    } 
 

 
.instruments{ 
 
    width:50px; 
 
    height:50px; 
 
    background-color:#999999; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<div id="content"> 
 
</div> 
 

 
<div class="instruments"> <!-- here you were using an id instead of a class --> 
 

 
</div>