使用带有kineticJs的jquery draggable UI来使元素对齐网格？

我是jquery的新手我已经使用Kinetic.js实现了拖放操作我在html中有一些图像并且我将它们传递给javascript函数并使它们可拖动。有两组图像..现在我想要如果它们靠近，它们会互相对齐。 我是jquery的新手所以我不知道怎样才能将动能js图像变量传递给jquery操作，他们已经传递了img id标签。 此外，我无法弄清楚jquery函数的放置位置以及如何…

这是代码..有人请帮忙..

   canvas { border: 1px solid #9C9898; } #img { position:absolute; left:700px; top:150px; } #img1 { position:absolute; left:800px; top:150px; }  

加载jquery库

Kinetic.js-加载图像并使em可拖动

   function drawImage(imageObj){ var stage = new Kinetic.Stage("container", 578, 500); var layer = new Kinetic.Layer(); var x = stage.width / 2 - 200 / 2; var y = stage.height / 2 - 137 / 2; var width = 200; var height = 137; // darth vader var darthVaderImg = new Kinetic.Shape(function(){ var context = this.getContext(); context.drawImage(imageObj, x, y, width, height); // draw invisible detectable path for image 

需要一些关于这个jquery函数的帮助如何使用它并在这里传递动能js draggable图像

  $(function() { $(this).draggable({ grid: [ 80, 80 ] }); }); context.beginPath(); context.rect(x, y, width, height); context.closePath(); }); 

可拖动function

  // enable drag and drop darthVaderImg.draggable(true); // add cursor styling darthVaderImg.on("mouseover", function(){ document.body.style.cursor = "pointer"; }); darthVaderImg.on("mouseout", function(){ document.body.style.cursor = "default"; }); //remove image on double click darthVaderImg.on("dblclick dbltap", function(){ layer.remove(darthVaderImg); layer.draw(); }); layer.add(darthVaderImg); stage.add(layer); //events } function drawImage2(imageObj){ var stage = new Kinetic.Stage("container", 578, 500); var layer = new Kinetic.Layer(); var x = stage.width / 2 - 300 ; var y = stage.height / 2 - 137 ; var width = 200; var height = 137; // darth vader var darthVaderImg2 = new Kinetic.Shape(function(){ var context = this.getContext(); context.drawImage(imageObj, x, y, width, height); // draw invisible detectable path for image context.beginPath(); context.rect(x, y, width, height); context.closePath(); }); // enable drag and drop darthVaderImg2.draggable(true); // add cursor styling darthVaderImg2.on("mouseover", function(){ document.body.style.cursor = "pointer"; }); darthVaderImg2.on("mouseout", function(){ document.body.style.cursor = "default"; }); //remove image on double click darthVaderImg2.on("dblclick dbltap", function(){ layer.remove(darthVaderImg2); layer.draw(); }); layer.add(darthVaderImg2); stage.add(layer); } function load(img){ // load image var imageObj = new Image(); imageObj.onload = function(){ drawImage(this); }; imageObj.src = img.src; }; function load2(img){ // load image var imageObj = new Image(); imageObj.onload = function(){ drawImage2(this); }; imageObj.src = img.src; };  

Html定义图像点击操作

Answer 1

我能够修改kinetic-v3.9.3.js以使用snap-to跟随以下补丁（diff格式）进行拖动：

 813a814,825 > * set drag grid constraint > */ > setDragGridConstraint: function(constraint) { > this.attrs.dragGridConstraint = constraint; > }, > /** > * get drag grid constraint > */ > getDragGridConstraint: function() { > return this.attrs.dragGridConstraint; > }, > /** 1847a1860,1861 > var dgc = node.attrs.dragGridConstraint; > 1858a1873,1877 > if(dgc !== undefined) { > newNodePos.x = Math.floor(newNodePos.x/dgc.x)*dgc.x + (dgc.x/2); > newNodePos.y = Math.floor(newNodePos.y/dgc.y)*dgc.y + (dgc.y/2); > } > 

要为像rect这样的东西进行设置，请确保在实体上将draggable设置为true，然后可以使用setDragGridConstraint（）将捕捉设置为距离，如下所示。

  var box = new Kinetic.Rect({ x: rectX, y: rectY, width: 100, height: 50, fill: "#00D2FF", stroke: "black", strokeWidth: 4, draggable: true }); box.setDragGridConstraint({x: 50 , y: 50}); 

Answer 2

这有点旧，但是，你可以做这样的事情，而不是制作补丁：

 var isNearSnapArea = function(image, snapArea) { if (image.attrs.x > snapArea.x - 30 && image.attrs.x < snapArea.x + 30 && image.attrs.y > snapArea.y - 30 && image.attrs.y < snapArea.y + 30) { return true; } else { return false; } } var isNearObjectSnapArea = function(image, layer, callback) { // What the new object will snap to if it is near it var snapTo = { 'x': image.attrs.x, 'y': image.attrs.y }; for (var x = 0; x < layer.children.length; x++) { var myObject = { 'x': layer.children[x].attrs.x, 'y': layer.children[x].attrs.y, '_id': layer.children[x]._id } if(isNearSnapArea(image, myObject) && image._id !== myObject._id) { snapTo.x = myObject.x; snapTo.y = myObject.y + 30; callback(snapTo); return; } } } //Then, later in your program: image.on('dragend', function() { isNearObjectSnapArea(image, layer, function(snapTo) { image.attrs.x = snapTo.x; image.attrs.y = snapTo.y; layer.draw(); }); }); 

可能有更好的方法，但这是有效的。