jquery - Trigger javascript event on different target -


i have element adds child when mousedown or touchstart event occurs. child resizable (jquery ui widget). use http://touchpunch.furf.com/ wich enables jquery-ui widgets touch devices.

i want resize child when gets created without lifting mouse/touch , clicking again. works mouse devices fail trigger when using touch device.

check snippet (works mouse, fails touch)

  1. mousedown un blue element (red element created)
  2. keep mouse down , drag right (red element gets resized)

i fail making work touch device. create element on touchstart, not able resize whitout lifting finger.

i want achive same touch mouse. problem don't know how event must have trigger on resize-handle

i check if touch event , try change event.target not work.

if (event.type === "touchstart") {   console.log("here 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 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>


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -