how to send the event to the clone without using jquery on iphone .

Question

this is the code:

$("#draggable").draggable({
    helper: 'clone'
   });

use this code , if you drag the div , you will drag the clone ,

this is my code without using jquery and jquery-ui,i want to drag the clone-one when i drag the div:

var $=function(str){
   var div=document.createElement('div')
   div.innerHTML=str;
   return div.firstChild;
  }
function id(id){
   return document.getElementById(id)
  }

and

id('draggable').addEventListener("touchstart", function(e) {
     var clone_div=$('<div id="draggable_" style="z-index:11;color:red">'+
          '<p>Drag me to my target</p>'+
         '</div>')
     clone_div.addEventListener("touchstart",function(e2){
      e2=e;
     })
   });

and

id('draggable').addEventListener("touchmove", function(e) {

                //if(e.changedTouches[0].target == id('draggable')){
                    e.preventDefault();
                    id('draggable').dragging=true;
                    //var orig = e.originalEvent;
                    var x = e.changedTouches[0].pageX;
                    var y = e.changedTouches[0].pageY;

                    id('draggable').style.left=x-70+'px';
                    id('draggable').style.top=y-70+'px';

            });

what can i do ?

thanks

Answer 1

it is ok now :

id('draggable').addEventListener("touchstart", function (e) {
            e.preventDefault();

            var clone_div = jmQuery('<div id="draggable_" style="z-index:111">' +
                                '<p>Drag me to my target</p>' +
                            '</div>');
            e.stopPropagation();
            function touchmove(e) {
                var x = e.pageX;
                var y = e.pageY;
                clone_div.style.left = x - 70 + 'px';
                clone_div.style.top = y - 70 + 'px';
                id('demo').insertBefore(clone_div, id('demo').firstChild);
                if (check_drop(e)) {
                    id('droppable').style.background = 'red';
                } else {
                    id('droppable').style.background = '#F6A828';
                }
            }

            function check_drop(e) {
                var drop_bounds = id('droppable').getBoundingClientRect();
                var now_bounds = {
                    left: e.pageX-document.body.scrollLeft - 50,
                    top: e.pageY -document.body.scrollTop- 50,
                    right: e.pageX -document.body.scrollLeft+ 50,
                    bottom: e.pageY -document.body.scrollTop + 50
                }

                //判断是否在droppable内
                if (!(now_bounds.right < drop_bounds.left ||
                            now_bounds.left > drop_bounds.right ||
                            now_bounds.bottom < drop_bounds.top ||
                            now_bounds.top > drop_bounds.bottom)
                        ) {
                    return true;
                }
                return false;
            }
            function touchend(e) {
                id('droppable').style.background = '#F6A828';
                if (check_drop(e)) {
                    id('droppable').appendChild(jmQuery(id('draggable_').innerHTML));
                }else{

                }
                id('draggable_').parentNode.removeChild(id('draggable_'));
                document.removeEventListener('touchmove', touchmove);
                document.removeEventListener('touchend', touchend);
            }

            document.addEventListener("touchmove", touchmove);
            document.addEventListener("touchend", touchend);

        });