Question

我有一个叫做内容的div

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

我有另一个div调用乐器

<div id="instruments">

</div>

当我点击一个乐器时，它必须添加到一个名为内容的div中。我做过这份工作。但我需要移动div（乐器）可调整大小。我尝试过使用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>

＆＃13;

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 
  }

＆＃13;

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

＆＃13;

<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>

＆＃13;

make resizable动态添加div

1 个答案: