1

有没有人使用带有 jquery 可拖动快照功能的 panzoom ？我需要缩放父 div (#canvas) 并允许子元素 (.draggable) 被拖动并相互对齐。除了缩放时，所有这些都非常有效。如果缩放/缩放，捕捉元素的位置将偏离几个像素。

我尝试了 css zoom、css transform(scale) ，但都导致了问题。我最初有一个常见的光标定位问题，其他人似乎有规模但能够解决这个问题。如果有人遇到此问题或有想法，我将感谢您的帮助....或者总是欢迎使用完全不同的方法。

这是一个 Codepen 示例，如果您拖动绿色瓷砖，则会显示问题：https ://codepen.io/5kyt3k/pen/Poomad

var menuWidth = 70; //Nav bar width (set in css file)
var canvasWidth = 1900; //#Canvas width (set in css file)
var currentZoom = ((window.innerWidth - menuWidth)/canvasWidth);
var currentScale = 1;

//Auto zoom #canvas to window size on load
$(document).ready(function () {
  $('#canvas').panzoom({
    disablePan: true,
    startTransform: 'scale('+ currentZoom +')',
    increment: 0.1,
    $zoomIn: $("#zoom-in"),
    $zoomOut: $("#zoom-out"),
  });

  $('#reset').click(function () {
    $('#canvas').panzoom("zoom", currentScale); //Not Working
  });
});

function dragTiles(){
  $( ".draggable" ).draggable({
    zIndex: 100,
    snap: ".driver",
    snapTolerance: 20,

    revert : function(droppableContainer){
      if(droppableContainer) {
        //alert('valid');
      }else {
        //alert('invalid');
      }
      return(droppableContainer)
    },
    //containment: '#canvas',
    start: function(e){
      $(this).removeClass('prevent');
      var pz = $("#canvas");
      //we need current scale factor to adjust coordinates of dragging element
      currentScale = pz.panzoom("getMatrix")[0];
      $(this).css("cursor","move");
      pz.panzoom("disable");//disable panzoom to avoid double offset
    },
    drag:function(e,ui){
      //fix scale issue
      ui.position.left = ui.position.left/currentScale;
      ui.position.top = ui.position.top/currentScale;
    },
    stop: function(e,ui){
      $(this).addClass('prevent');
      $(this).css("cursor","");
      //enable panzoom back
      $("#canvas").panzoom("enable");
    }
  })
   $(".tile-content").droppable({
     accept: '.draggable',
   });
};

$( ".add" ).click(function() {
  var item = $('#name').val();
  var dsc = $('#dsc').val();
  var type = $('#type').val().toLowerCase().replace(/ /g,'-');
  if(item !== null && item !== ''){
    $('#canvas').append('<div class="draggable '+ type +' prevent" name="'+ item +'" type="'+ type +'"><div class="tile-content">' + item + '<span class="dsc">' + dsc + '</span></div></div>');
    dragTiles();
    removeTile();
  } else{
    console.log('empty');
  }
});
4

0 回答 0