Question

所以我试图使用此页面上示例中的代码：

http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/

与textareas相同的盒子 - 可调整大小 - 可拖动 - 与cornes中的图标。

它在PC上运行良好。但是在平板电脑上，我似乎无法专注于textarea - 我仍然可以移动它并调整它的大小（虽然调整大小就像垃圾一样） - 我使用jquery.ui.touch-punch。

我似乎无法以编程方式集中注意力:(

以下是我的代码：

  function newCommon(tpl_id, sub_tag) {
    $("div[id*='el_div_']").css("position", "absolute"); // 1

    var newDraggable = $("#" + tpl_id).clone().css("zIndex", elCount + 100).attr("id", "el_div_" + elCount)
                                .addClass("resizable ui-resizable").prependTo("#workarea"); // 2

    newDraggable.find(".delete").click(function () {
        $(this).parent().remove(); // 3
    });

    var dragger = newDraggable.find(".dragger"); // 4
    dragger.bind('touchstart mousedown', function () { newDraggable.draggable({ containment: "#workarea" }); });
    dragger.bind('mouseend', function () { newDraggable.draggable("disable"); });
    elCount++;
    return newDraggable;
}


var types = {


    input: function (pos) {

        var draggable = newCommon("txt_div_tpl", "textarea");
        draggable.addClass("ui-dragdrop-droppableElement ui-dragdrop-toolboxElement ui-dragdrop-textElement useDefault");
        draggable.css({
            "top": pos.y,
            "left": pos.x
        });

        //draggable.click(function () {
        //    console.log("clicked!");
        //    console.log(input.ID.toString() + "ID");
        //    CKEDITOR.replace("como");
        //});

        draggable.resizable({
            handles: "all",
            minWidth: 160,
            minHeight: 160,
            ghost: true,
            stop: function () {
                $(this).stayInBox($("#workarea"));
                var margin = $(this).find(".dragger").width() * 2;
                $(this).find("textarea").width($(this).width() - margin).height($(this).height() - margin);
            }
        });

        return draggable;


    },

and heres a pic of my element:

任何想法可能是什么问题？

Answer 1

添加事件以在单击textarea时禁用可拖动，并在textarea模糊时启用拖动。

$(".draggable textarea").click(function(){
    $(this).closest(".draggable").draggable('disable');
}).blur(function(){
    $(this).closest(".draggable").draggable('enable');
});

将禁用状态的不透明度修改为1，以便用户不知道它暂时被禁用。

.draggable.ui-state-disabled {
    opacity: 1;
}

textarea在触摸时无法编辑

1 个答案: