textarea的触摸

问题描述:

不可编辑,以便香港专业教育学院尝试这个页面上使用的代码的例子:textarea的触摸

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

使还挺同一盒用文字区域 - 调整大小 - 拖动 - 与了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:

任何想法可能是什么问题

+0

更新:我得到textarea的通过下面的代码关注: “点击”'code' draggable.click(函数(){ 的console.log(); 如果($(本).find( “textarea”)。focus()) console.log(“focused”); });'code' - 但是我不能移动文本框中的光标 - 并且ipad通常提供的所有编辑选项都不可用 - 我可以写入 - 但只能在光标的随机位置 – SimontheS 2013-04-30 13:11:33

添加事件在单击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; 
}