调整大小以动态添加div [英] make resizable a dynamically add div
问题描述
我有一个称为内容"的div
I have a div called content
<div id="content">
</div>
我还有另一个div呼叫工具
I have another div call instruments
<div id="instruments">
</div>
当我单击一个工具时,它必须添加到一个名为content的div中.我已经完成了这项工作. 但是我需要将移动的div(仪器)调整大小.我尝试使用jquery-ui.js,但失败了.我该怎么办?脚本是波纹管
When I click on an instrument it has to added to a div called content. I have done this job. But I need to the moved div (instrument) is resizable. I have tried using jquery-ui.js but it failed. what am i going to do? the script is bellow
<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>
推荐答案
您的javascript中出现语法错误,您使用的是.one()
而不是.on()
,并且在html中使用id="instruments"
时应使用class="instruments"
You have a syntax error in your javascript where you have .one()
instead of .on()
and you are using id="instruments"
in your html when it should be 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!