そのため、このページの例のコードを使用しようとしました:
http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/
テキストエリアを使用して同じボックスを作成します-サイズ変更可能-ドラッグ可能-コーンのアイコンを使用します。
そして、それはPCでうまく機能します。しかし、タブレットではテキストエリアに焦点を当てることができないようです-移動してサイズを変更できます(サイズ変更はがらくたのように機能しますが)-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;
},
何が問題なのですか?