1

I have a element which adds a child to itself when a mousedown or touchstart event occurs. This child is resizable (jQuery ui widget). I use http://touchpunch.furf.com/ wich enables jquery-ui widgets for touch devices.

I want to resize the child when it gets created without lifting the mouse/touch and clicking again. It works for mouse devices but i fail to trigger it when using a touch device.

Check the snippet (works for mouse, fails with touch).

  1. Mousedown on blue element (red element is created)
  2. Keep mouse down and drag to the right (red element gets resized)

I fail making it work for a touch device. I create the element on touchstart, but i am not able to resize it whithout lifting my finger.

I basically want to achieve the same with touch as with the mouse. Problem is I don't know how the event must look like which I have to trigger on the resize-handle.

I check if it is a touch event and try to change the event.target but this does not work.

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
SCHTAILian
  • 428
  • 4
  • 16
  • 1
    Where is the code? if you can create a pen then sure can create a snippet click `<>` – Satpal Apr 07 '17 at 13:56
  • its in the question: http://codepen.io/SCHTAILian/pen/RpzrmW/ – SCHTAILian Apr 07 '17 at 14:07
  • didn't know pens aren't liked anymore; edited. – SCHTAILian Apr 07 '17 at 14:31
  • I have voted to reopen the question. However only pen/fiddle is not appreciated. – Satpal Apr 07 '17 at 15:04
  • Would advise using a CDN and not raw Git: https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js – Twisty Apr 07 '17 at 21:21
  • Created Fiddle: http://jsfiddle.net/Twisty/21scnkLv/ Test with Mobile: http://jsfiddle.net/Twisty/21scnkLv/show/ – Twisty Apr 07 '17 at 21:24
  • I'm unable to replicate the issue in my fiddle. I can resize the red `div` both via FireFox and Chrome on Mobile and Desktop. – Twisty Apr 07 '17 at 21:27
  • 1
    Improved fiddle : https://jsfiddle.net/Twisty/21scnkLv/4/ & for mobile: https://jsfiddle.net/Twisty/21scnkLv/4/show/ – Twisty Apr 07 '17 at 21:44
  • yes, i am able to resize, but not with the first mousedown.On touch, i need to click the resize handler after the div is created. While, with a mouse, i keep the mouse button down and resize the div left and right. – SCHTAILian Apr 10 '17 at 06:50

0 Answers0