我是jquery的新手 我已经使用Kinetic.js实现了拖放操作 我在html中有一些图像，我将它们传递给javascript函数并使它们可拖动。有两组图像.. 现在，如果他们靠近，我想让他们互相攻击。 我是jquery的新手所以我不知道怎样才能将动能js图像变量传递给jquery操作，他们已经传递了img id标签。 此外，我无法弄清楚jquery函数的放置位置以及如何...
这是代码.. 有人请帮忙......
<html>
<head>
<style>
canvas {
border: 1px solid #9C9898;
}
#img
{
position:absolute;
left:700px;
top:150px;
}
#img1
{
position:absolute;
left:800px;
top:150px;
}
</style>
加载jquery库
<script src="kinetic-v3.8.0.min.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
Kinetic.js-加载图片并使em可拖动
<script>
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();
});
可拖动功能
// 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;
};
</script>
Html定义图像上的操作点击
<title>HTMl5 drag drop multiple elements</title></head>
<body onmousedown="return false;">
<div id="container">
</div>
<div id="check1">
<ul id="img" class="draggable ui-widget-content" > <li><a href="#" class="draggable ui-widget-content" onclick="load(document.getElementById('i1'))">
<img src="dog.png" id="i1" class="draggable ui-widget-content" alt="doggie" width="60" height="55"/>
</a></li>
<li>
<a href="#" onclick="load(document.getElementById('i2'))">
<img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /></a>
</li>
</ul>
</div>
<ul id="img1">
<li><a href="#" onclick="load2(document.getElementById('i4'))">
<img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
</a></li>
<li><a href="#" onclick="load2(document.getElementById('i5'))">
<img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
</ul>
</body>
</html>
答案 0 :(得分：4)
我能够修改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});
答案 1 :(得分：0)
这有点旧，但是，你可以做这样的事情，而不是制作补丁：
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();
});
});
这可能是一种更好的方法，但这很有效。