我想在IFrame上绘制一个可拖动且可调整大小的矩形/框而不是Canvas或div，我该如何使用它？ 目前我正在使用链接的jsFiddle示例 I used this Js fiddle example
jQuery(function($) {
var welcome_area = $('.inner_col_two'),
main_content = $('.col_two'),
css_module = $('.inner_col_one'),
gen_box = null,
i = 1;
//fade out welcome button and remove it
$('.start-button').click(function() {
welcome_area.fadeOut('slow', function() {
$(this).remove();
//when welcome button is removed fade in the css module and make .col_two selectable
//css_module.fadeIn('slow').resizable().draggable();
}); //end start button fade callback function
});//end start button click
//make .col_two selectable and...
main_content.selectable({
start: function(e) {
//get the mouse position on start
x_begin = e.pageX,
y_begin = e.pageY;
},
stop: function(e) {
//get the mouse position on stop
x_end = e.pageX,
y_end = e.pageY;
/*** if dragging mouse to the right direction, calcuate width/height ***/
if( x_end - x_begin >= 1 ) {
width = x_end - x_begin,
height = y_end - y_begin;
/*** if dragging mouse to the left direction, calcuate width/height (only change is x) ***/
} else {
width = x_begin - x_end,
height = y_end - y_begin;
var drag_left = true;
}
//append a new div and increment the class and turn it into jquery selector
$(this).append('<div class="gen_box_' + i + '"></div>');
gen_box = $('.gen_box_' + i);
//add css to generated div and make it resizable & draggable
$(gen_box).css({
'background' : '#fff',
'width' : width,
'height' : height,
'position' : 'absolute',
'left' : x_begin,
'top' : y_begin
})
.draggable({ grid: [20, 20] })
.resizable({
stop: function(event, ui) {
var secondwidth = ui.size.width;
alert('Resized width: '+secondwidth);
var secondheight = ui.size.height;
alert('Resized Height: '+secondheight);
}
});
var current_box_width = width;
alert('Box width = '+current_box_width);
var current_box_height = height;
alert('Box height = '+current_box_height);
var x = $(gen_box).position();
alert("Top position: " + x.top + " Left position: " + x.left);
//if the mouse was dragged left, offset the gen_box position
drag_left ? $(gen_box).offset({ left: x_end, top: y_begin }) : false;
console.log( 'width: ' + width + 'px');
console.log( 'height: ' + height + 'px' );
//add thr styles of generated div into .inner_col_one
i++;
}});
}); html {
height:100%;
width:100%;
}
body {
background:#ccc;
height:101%;
width:101%;
}
h3 {
font:bold 20px georgia, serif;
}
#wrapper {
width:100%;
height:100%;
margin:0 auto;
overflow:hidden;
}
/* --------- col_one elements(stylesheet) --------- */
.col_one {
height:100%;
width:18%;
background:#ffe3ac;
min-width:1px;
position:absolute;
bottom:0px;
right:0px;
}
.inner_col_one {
margin:10px;
padding:20px;
min-height:200px;
background:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0 0 7px -1px #999;
-moz-box-shadow:0 0 7px -1px #999;
box-shadow:0 0 7px -1px #999;
display:none;
position:absolute;
overflow:hidden;
}
.button.dl-css {
float:left;
margin:0 auto;
display:block;
}
/* --------- col_two elements(Create divs) --------- */
.col_two {
background:#ffe3ac;
float:left;
height:100%;
position;
relative;
width:100%;
}
.inner_col_two {
border:1px dashed black;
width:40%;
margin:13% auto;
text-align:center;
background:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0 0 7px -1px #999;
-moz-box-shadow:0 0 7px -1px #999;
box-shadow:0 0 7px -1px #999;
}
/* ------------ generic styles ------------ */
.full-width {
width:100%;
}
/* box styles */
.ui-resizable {
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.ui-resizable.ui-resizable-resizing, .ui-resizable.ui-draggable-dragging {
border:2px dashed #ffcc66 !important;
}
.selected {
background:#ffffff;
}
/* prettify styles */
.prettyprint {
border:none !important;
font: 16px 'Courier New', Courier, monospace;
}
/* generated content */
#canvas {
height: 500px;
background: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
<div id="wrapper">
<div class="col_one css">
<div class="inner_col_one"></div>
</div>
<div class="col_two">
<!--<div class="inner_col_two">
<input type="button" value="Create a div" class="start-button"/>
</div>-->
</div>
</div>