如何结合Jeditable和jQueryUI resizable？

Question

我正在尝试将Jeditable与jQuery UI可调整大小相结合。我就差这么一点了，除了Jeditable似乎用可调整大小的功能做了一些有趣的事情。

下面代码的问题是调用resizable的销毁函数时出现错误(见下文)。我查过了，班级还在。一开始我没有包含resizable的销毁，但是没有销毁它并重新初始化它，在第一次编辑(或取消)后，重新调整大小不再起作用。出现此错误时，取消将不再起作用(即，它将保留编辑)。

Error: cannot call methods on resizable prior to initialization; attempted to call method 'destroy'

JSFiddle -> http://jsfiddle.net/y8Ayd/

HTML

<div class="box">Hello</div>

CSS

.box {
  background-color: #ccf;
  height: 150px;
  width: 150px;
}

JS

$('.box').resizable();

$('.box').editable(
function (value, settings) {
    return (value);
}, 
{
    cancel: 'x',
    callback: function (value, settings) {
        $(this).resizable('destroy');
        $(this).resizable();
    },
    data: function (value, settings) {
        return value.replace('<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>', '');
    },
    event: 'dblclick',
    onreset: function (settings, original) {
        $(this).resizable('destroy');
        $(this).resizable();
    },
    submit: 'ok'
});

Answer 1

正如它在错误消息中所说的:在初始化可调整大小之前，您正在尝试调用resizable()或resizable('destroy')。

然而，您正在尝试做的是不起作用的，因为(jquery.jeditable.js)的可编辑位置在内容中，即ui-resizable-handle、ui-resizable-e等等。您已经意识到这一点，因为您正在尝试通过value.replace(‘)从值中删除那些垃圾。

一种可能是将div包装在可编辑对象周围，并将可调整大小的对象附加到该div。

我给你做了一个小样本：

或在JSFiddle上：http://jsfiddle.net/U4LUe/20/

HTML：

<div id="EditBox1" class="editbox">Enter some Text...</div><br/>

<div id="EditBox2" class="editbox">Enter some Text in an Area...</div>

CSS：

    .editboxwrapper {
      background-color: #ccf;
      width: 650px;
      min-height: 50px;
      padding: 0px;
      overflow: hidden;
    }
    .editbox {
      width: 100%;
      margin: 0px 10px 0px 0px;
    }

JQuery：

$(function () {
    //on $(document).ready(function () {...});
    ResizableEditbox({
        selector: 'EditBox1',
        wrapperClassName: 'editboxwrapper' //the class of the wrapper (for css-style)
    });
    ResizableEditbox({
        selector: 'EditBox2',
        wrapperClassName: 'editboxwrapper' //the class of the wrapper (for css-style)
    });
});
function ResizableEditbox(args) {
    var me = this;
    this.args = args;
    this.wrapperName = args.selector + 'Wrapper';

    $('#' + args.selector).editable(
        function (value, settings) { //This fakes a real call to the server!
          return (value);
        }, {
        type: 'textarea',
        tooltip: 'Click to edit...',
        cancel: 'x',
        id: this,
        callback: function (value, settings) {
            me.InitResizable(me.wrapperName);
        },
        data: function (value, settings) {
            me.RemoveResizable(me.wrapperName);
            var retval = value;
            return retval;
        },
        event: 'click',
        onreset: function (settings, original) {
            //var class = $(this).className;
            me.InitResizable(me.wrapperName);
        },
        submit: 'ok',
        onsubmit: function (settings, td) {
            var value = td.textContent;
            if (value == "") {
                alert('Please enter a value');
                return false;
            }
            else {
                return true;
            }
        }
    });
    this.CreateWrapper = function () {
        //create a div$('#' + args.selector).wrap("<div id='" + my.wrapperName + "' class='"     +     my.args.wrapperClassName + "'></div>");
        var wrapperDiv = $(document.createElement("div"));
        wrapperDiv.addClass(me.args.wrapperClassName);
        wrapperDiv[0].setAttribute("id", me.wrapperName);
        $('#' + args.selector).wrap(wrapperDiv[0].outerHTML); 
    };

    this.InitResizable = function(wrapperSelector) {
        var element = $('#' + wrapperSelector);
        if (element.length > 0) {
            if (!element.hasClass('ui-resizable-handle')) {
                element.resizable({
                    //Initialise
                });
            }
        }
    };
    this.RemoveResizable = function(wrapperSelector) {
        var element = $('#' + wrapperSelector);
        if (element.length > 0) {
            if (!element.hasClass('ui-resizable-handle')) {
                element.resizable('destroy');
            }
        }
    };
    me.CreateWrapper();
    me.InitResizable(me.wrapperName);
}