1

我有一个元素，当一个mousedown或touchstart事件发生时，它会向自己添加一个孩子。这个孩子是resizable（jQuery ui 小部件）。我使用http://touchpunch.furf.com/为触摸设备启用 jquery-ui 小部件。

我想在创建孩子时调整它的大小，而无需抬起鼠标/触摸并再次单击。它适用于鼠标设备，但我在使用触摸设备时无法触发它。

检查片段（适用于鼠标，触摸失败）。

  1. Mousedown在蓝色元素上（创建红色元素）
  2. 按住鼠标并向右拖动（红色元素被调整大小）

我无法使它适用于触摸设备。我在 上创建元素touchstart，但不抬起手指就无法调整它的大小。

我基本上想实现与鼠标相同的触摸。问题是我不知道event 必须在调整大小手柄上触发的必须是什么样子。

我检查它是否是触摸事件并尝试更改，event.target但这不起作用。

if (event.type === "touchstart") {
  console.log("here i am stuck")
  event.target = handler[0];
  item.trigger(event);    
}


$(function(){
  $(document).on("mousedown touchstart", ".resizeCreator", function(event){
    if ($(this).find("div").length){
      return;
    }
    
    //Add resizable div
    $(this).append("<div>resize me</div>");
    $(this).find("div").resizable({handles: "e"});    
    simulateHandleEvent($(this).find("div"), event)
  });
  
  $(document).on("click", "button", function(){
    $(".resizeCreator").find("div").remove();
  });
})

var simulateHandleEvent = function(item, event){
  var handler = item.find(".ui-resizable-e").first();
  
  if (event.type === "touchstart") {
    console.log("here i am stuck")
    event.target = handler[0];
    item.trigger(event);    
  }else{
    handler.trigger("mouseover");
    handler.trigger({
    type: "mousedown",
    which: 1,
    pageX: handler.offset().left,
    pageY: handler.offset().top
  });    
  }
}
.resizeCreator{
  width:200px;
  height:200px;
  padding:5px;
  border:1xp solid black;
  background-color:blue;
}

.resizeCreator div{
  background-color:red;
  display:inline-block;
  padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<div class="resizeCreator">

</div>

<button>reset</button>

4

0 回答 0