Question

在我的fiddle中，您可以在每个父母中看到两个父div和子div！来自First父div的子div可以拖动并调整大小（使用JQueryUI）此div有dragEnd和resizeEnd事件。

我想要做的是，在dragEnd之后，设置第二个父div的子div的位置，与第一个子div相同。
并且，在resizeEnd之后，设置第二个父div的子div的大小，与first的子div相同。
想要同步两个子div 谢谢！

HTML

   <div id="resizable" class="ui-widget-content">
    This is text Line 1<br/>

  </div>
    <img src="http://www.psdgraphics.com/file/abstract-background.jpg" width="400" height="150"  />
</div>

    <br/>
Second<br/>
    <div id="previewContainer">
  <div id="previewText" class="ui-widget-content2">
    This is text Line 1<br/>   
  </div>
    <img src="http://www.psdgraphics.com/file/abstract-background.jpg" width="400" height="150"  />
    </div>
<br/>

JavaScript

   var DEF_HEIGHT = 100; // the #resizable default height
$( "#resizable" ).resizable({
    containment: 'parent',handles: "se",stop:resizeStop,

  aspectRatio: true,
  resize: function( event, ui ) {        
    var curHeight = (ui.size.height/ DEF_HEIGHT) * 100;

    $(this).css('font-size', curHeight + '%');
  }
}).draggable({containment: 'parent'

             });

 $( "#resizable" ).draggable({
start: function() {

},
drag: function() {

},
stop: function() {
alert("Drag End");  
}
});

$("#resizable").resizable({
    stop: function(event, ui) {
    alert('Resize End');
    }
});

function dragStop(event, ui){
}

function resizeStop(event, ui){ 
}

Answer 1

你可以这样做：

$("#resizable").resizable({
    ...
    stop: function (event, ui) {
        $preview.css({width: this.style.width, height: this.style.height});
    }
})
.draggable({
    ...
    stop: function (e, ui) {
        $preview.css($(this).position());
    }
});

使用javascript同步两个div

1 个答案:

演示：http://jsfiddle.net/YxcS8/6/