Question

我有一个iFrame，我希望用户能够抓住它的一面并拖动它来调整它的大小。我不希望它实时调整大小，而是使用指标行，当用户发布时，它会调整大小。

$('.Myclass').draggable({ 
    iframeFix: true, 
    containment: "#canvass",
    scroll: false,
    stop: function (event, ui) {
        MyFunction($(this));
    } 
});

$('.Myclass').resizable({
    stop: function (e, ui) {
        MyFunction($(this)); 
    } 
});

Answer 1

添加Jquery链接

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />

jquery代码

$（document）.ready（function（）{

    //----------Video--------
    $('.video').draggable({ iframeFix: true, containment: "#canvass", scroll: false, stop: function (event, ui) { SetVideoPostion($(this)); } });
    $('.video').resizable({ stop: function (e, ui) { SetVideoPostion($(this)); } });


});

function SetVideoPostion(ctrl) {

    var videoId = ctrl.attr('id');
    var width = ctrl.css('width');
    var height = ctrl.css('height');
    var index = ctrl.css('z-index');
    var left = ctrl.css('left');
    var top = ctrl.css('top');
    var position = ctrl.css('position');
    var style = 'style=" padding:10px;  cursor: move; z-index:' + index + ';left:' + left + '; top:' + top + ';position:' + position + '; width:' + width + '; height:' + height + ';"';
    $("#Position").text(style);
}

添加Html标记

<div style="clear: both"></div>
<div class="video" style="display: block; padding: 2px; background-color: #000; height: 200px; width: 400px; padding: 10px; cursor: move;">

    <iframe width="100%" height="100%" src="//www.youtube.com/embed/UMciMQ-jipk" frameborder="0" class="frame"></iframe>

</div>

JQuery可调整大小和可拖动

1 个答案: