1

所以我尝试使用本页示例中的代码：

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

用文本区域制作有点相同的框 - 可调整大小 - 可拖动 - 带有角落中的图标。

它在电脑上效果很好。但在平板电脑上，我似乎无法聚焦文本区域——我仍然可以移动它并调整它的大小（尽管调整它的大小就像垃圾一样）——我使用的是 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;


    },

这是我的元素的照片：

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

4

1 回答 1

0

添加事件以在单击 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;
}
于 2013-05-31T16:45:15.697 回答