标签: jquery-resizable

我试图附加一个div onClick,它既可拖动又可调整大小,带有句柄,用于调整div在所有4个角落的大小.

我已经能够使div可拖动并添加手柄......但是......只有div的底部,右侧和右下角实际上工作...顶部和其他角落在悬停时显示箭头...但不会调整div的大小!？!？!

<script>

$(document).ready(function() {

    //onClick append a resizable & draggable div with handles on all 4 corners
    $('#mega_wrap').click(function(e){

        //Define element css and positioning then add both draggable and resizable from jQuery UI
        var ele = $("<div>");
            ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50});
            ele.draggable();
            ele.resizable();

        //Define elements handles and append them to the new div
        var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>");
        var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>");
        var eleHandleSW = …

我在这里有一个调整大小的问题.我正在使用.resizable()以下css的div上使用JQuery :

div#resizable {
   float: left;
   border: solid 1px white;
   box-shadow: 0px 0px 0px 1px #F2F2F2;
   box-sizing: border-box;
   padding: 15px;
}

它还包含许多其他div和其他东西.我这样附上resizable:

$( "#resizable" ).resizable({ minWidth: 200, 
                              maxWidth: 597, 
                              minHeight: 240,
                              resize: widgetResizeListener 
                            });

现在widgetResizeListener()只需在控制台中记录一些东西.

现在当我试图通过拖动它来改变div的高度时ui-resizable-s,它会自动将div的宽度改变大约30px.每次我开始拖动时都会发生这种情况.因此每次都会丢失所需的宽度.更改宽度时,高度会发生同样的情况.

现在我想知道是不是因为我的div有填充？因为之前,当没有填充时,这种"跳跃"的事情就不会发生.现在我无法删除填充,因为它确实需要.那么这个问题怎么解决呢？我的意思是有没有办法在JQuery resizable()中包含填充？

任何帮助将不胜感激,谢谢......

colResizable似乎是一个可调节列宽的好插件.

不幸的是,它删除了最初设置的宽度.我正在使用,whitespace: nowrap因为我有一些小柱子和一些较大的柱子.现在使用colResizable插件,所有列都会调整为相同的大小.

我尝试通过在插件占用之前读取col宽度来解决,然后重置它们.起初它看起来不错,但随后发生了一些奇怪的事情.夹具当然留在他们使用相同尺寸的柱子的地方.

var columnWidths = new Array();
// store original col widths in array
$.each($("th", table), function () {
    columnWidths.push($(this).width());
});

// Make cols resizable
$(function () {
    table.colResizable({
        liveDrag: true,
        gripInnerHtml: "<div class='grip'></div>",
        draggingClass: "dragging"
    });
});

// reset columns to original width
for (var i = 0; i < columnWidths.length; i++) {
    $('th:nth-child(' + (i + 1) + ')', table).css({ width: columnWidths[i] + "px" });
}

谁能想到更好的解决方案？

我面临的问题是div的可恢复性.当我将它与Draggable一起使用时,它会产生问题而无法在宽度方面调整大小.

如果我单独使用可调整大小,那么它很好.但我需要让它与可拖动功能一起工作.

请建议.

单击演示的jsFiddle链接.

Hay即时消息是jquery的新手，我正在尝试使用可调整大小的代码。我可以使其正常工作，但似乎无法解决如何返回新尺寸的问题。我想将新大小设置为要保存在数据库中的php变量。我是javascript和jquery的新手，所以任何帮助都将是很大的帮助。

我很困惑为什么下面的脚本不起作用...它附加div(import_box)并使其可拖动,但不可调整大小？我错过了什么,我尝试了一些不同的东西,但他们都要么禁用拖动,要么什么都不做以改善情况.我很乐意为你提供帮助......

function open_import_window(){
$('body').append('<div id="msg_bg"></div>');
$('body').append('<div id="import_box" class="import_box"><div class="title_bar">Import</div><div id="content_import_box"></div></div>');
$('#import_box').draggable({handle:".title_bar"}).resizable();
var window_width = $(window).innerWidth();
var import_box_left = (window_width/2)-400;
$("#import_box").css("left", import_box_left);

var window_height = $(window).innerHeight();
var import_box_top = (window_height/2)-250;
$("#import_box").css("top", import_box_top);

$.ajax({
    url: 'import.php',
    success: function(data) {
        $('#content_import_box').html(data);
        resize();
    }
});
}

我做了一个小jsfiddle:http://jsfiddle.net/YSs6U/

我有一个元素:

<a id="lnkViewEventDetails" class="psevdo calendar-event event" style="height: 126px;" href="/someurl/895?responseType=5" onclick="event.stopPropagation();"> 

我想通过使用JQuery UI使其可调整大小:

$("#lnkViewEventDetails").resizable();

但它不起作用.

那么解决方案是什么？