Drag and drop on the mobile side
The < style >. Contents {width: 2.6 rem; Height: 2.6 rem; box-sizing:border-box; position:fixed; top:0; left:auto; bottom:0; } .fixed_l{ width: 100%; height: 100%; position: absolute; left: 0; top:30%; z-index: 9999; } </style> <body> <div class="contents"> <div class="fixed_l" onclick="jumpType(4961,'jump')"> <img class="pic" SRC = "https://i1.douguo.com/upload/banner/2/d/a/2d603ee9316adbe0d8b66ec59ba6a86a.png" Alt = "" > < / div > < / div > / / need to refer to jq <script type="text/javascript"> $(function(){ var contW = $(".fixed_l").width(); var contH = $(".fixed_l").height(); var startX, sX, moveX, moveY; var winW = $(".contents").width(); var disY = 0; $(". Fixed_l ") on ({/ / binding touchstart event: function (e) {startX = e.o. RiginalEvent targetTouches [0]. PageX; SX = $(this).offset().left; // The offset from the X-axis of the current window leftX = startx-sx; RightX = winw-contw + leftX; rightX = winw-contw + leftX; / / mouse can move the right side is the current window distance minus the mouse from div the most right position disY = e.o riginalEvent. TargetTouches [0]. ClientY - this. OffsetTop; }, touchmove: function(e) { e.preventDefault(); / / move XY coordinates to minus the margin in the process of distance moveX = e.o riginalEvent. TargetTouches [0]. PageX; If (moveX < leftX) {moveX = leftX; } if(moveX > rightX) { moveX = rightX; } var moveY = e.originalEvent.targetTouches[0].clientY - disY; if(moveY < 0) { moveY = 0 ; } if(moveY > document.documentElement.clientHeight - contH) { moveY =document.documentElement.clientHeight - contH; } $(this).css({ "left": moveX + sX - startX, "top": moveY, }) }, }) }) </script>Copy the code