JQuery 可调整大小和可拖动答案

【问题标题】：JQuery Resizable And DraggableJQuery 可调整大小和可拖动
【发布时间】：2014-01-30 12:59:10
【问题描述】：

我有一个 iFrame，我希望用户能够抓住它的一侧并拖动它来调整它的大小。我不希望它实时调整大小，而是使用指示线，当用户释放时，它会调整大小。

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

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

【问题讨论】：

这并不是一个真正的问题，您当前的代码需要包含在内以进行更正，因为这不是一个从头开始为您创建代码的论坛。

标签： jquery

【解决方案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>

【讨论】：