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:

任何想法可能是什麼問題

來源

2013-04-30 SimontheS

更新：我得到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; 
}

來源

2013-05-31 16:45:15 itjunkie

回答

相關問題