Utilisation de l'interface utilisateur jQuery Draggable avec KineticJS pour faire en sorte que les éléments nettent la grille?
https://stackoverflow.com/questions/9495610
-
14-11-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis nouveau sur jQuery j'ai implémenté l'opération de glisser-déposer en utilisant kinetic.js J'ai quelques images en html et je les passe à une fonction javascrip pour les faire se claquer s'ils s'approchent. Je suis nouveau sur jQuery, donc je ne sais pas comment puis-je passer la variable d'image cinétique JS dans une opération jQuery où ils ont passé la balise ID IMG. De plus, je ne suis pas en mesure de comprendre où placer la fonction jQuery et comment ..
Voici le code .. quelqu'un s'il vous plaît aidez.
<html>
<head>
<style>
canvas {
border: 1px solid #9C9898;
}
#img
{
position:absolute;
left:700px;
top:150px;
}
#img1
{
position:absolute;
left:800px;
top:150px;
}
</style>
Chargement des bibliothèques 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- pour charger l'image et rendre em gliscable
<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
Besoin d'aide avec cette fonction jQuery comment l'utiliser et passer l'image gagnoable JS cinétique ici
$(function() {
$(this).draggable({ grid: [ 80, 80 ] });
});
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
fonction draggable
// 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 Définition de l'opération sur l'image Cliquez
<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>
La solution
J'ai pu modifier cinétique-V3.9.3.js Pour activer la glisser avec Snap-to avec le patch suivant (format 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);
> }
>
Pour configurer cela pour quelque chose comme un record, assurez-vous de définir Draggable sur true sur votre entité, vous pouvez utiliser SetDragGridConstraint () pour configurer votre snap sur les distances comme ci-dessous.
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});
Autres conseils
C'est un peu vieux, mais, au lieu de faire un patch, vous pouvez faire quelque chose comme ceci:
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();
});
});
Il existe probablement une meilleure façon de le faire, mais cela fonctionne.
