使可调整大小动态添加 div

Question

我有一个div叫做内容

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

我还有一个div调用工具

<div id="instruments">

</div>

当我点击乐器时，它必须添加到 div 调用的内容中。我已经完成了这项工作。但是我需要移动 div (instrument) 是可以调整大小的。我试过使用 jquery-ui.js 但失败了。我要做什么？脚本如下

<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

您的 javascript 中存在语法错误，您使用 .one() 而不是 .on() 并且您在 html 中使用 id="instruments" 时应该是 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()

 $("#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(){
  //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>

使可调整大小动态添加 div

make resizable a dynamically add div

jquery

jquery-ui

jquery-ui-resizable