当使用jQuery-ui中的droppable是,当接收的元素添加了transform时被拖拽的元素位置就不准确的解决办法?
代码地址:https://github.com/yu19931003/jQui-droppable
当接收div的元素添加了transform时,将div拖拽进去,div的视觉位置不在鼠标抬起的位置
解决办法就是对droppable的计算出的position进行计算后再使用
源demo地址:https://github.com/yu19931003/jQui-droppable/tree/master/draggetest
html:
1 <div class='header'></div> 2 <div class="content"> 3 <div id="draggable" class="customCharts-parts"> 4 <div class="parts-category div">1</div> 5 <div class="parts-category div">2</div> 6 <div class="parts-category div">3</div> 7 </div> 8 <div class="right"><div id="template"></div></div> 9 </div>
css:
1 *{margin:0;padding:0;} 2 #draggable { width: 200px; height: 100px; position: absolute;left:0px;top:0px;background:#000;} 3 .parts-category { width: 100px; height: 20px; background: #ff0; } 4 #template { width: 600px; height: 600px; transform: scale(0.6); transform-origin: 0 0; background: #ff0000;;} 5 .header{ height: 85px; background: pink;} 6 .content{ overflow: hidden; position: relative;} 7 .right{margin-left: 200px;} 8 .div{ width: 100px; height: 20px; background: #ff0;}
js:
1 $(function() { 2 $( ".customCharts-parts > div" ).draggable({ 3 addClasses: false, 4 cursor: "move", 5 helper: 'clone', 6 revert: 'invalid', 7 zIndex: 999 8 }); 9 $( "#template" ).droppable({ 10 accept: ".parts-category", 11 drop: function( event, ui ) { 12 let curr = $(ui.helper).clone(); 13 let left = (ui.position.left-200) / 0.6; //200是接收元素的偏移大小,0.6是接收元素的缩放比例 14 let top = ui.position.top / 0.615 $(curr).css({'left': left + "px", 'top': top + "px"}); 16 $(this).append(curr); 17 curr.removeClass('parts-category'); 18 $(curr).resizable(); 19 $(curr).draggable({ 20 addClasses: false, 21 zIndex: 999, 22 cursor: "move", 23 // drag: function(event,ui) { 24 // 在拖拽的时候改变当前对象防止拖拽的对象和当前对象不一致 25 26 // let left = (ui.position.left-200) / 0.6; 27 // let top = ui.position.top / 0.6 + (20 * 0.6) 28 //$(curr).css({'left': left + "px", 'top': top + "px"}); 29 // } 30 }) 31 } 32 }); 33 });
