2

tengo un código que va poniendo un icono en pantalla cada vez que hace doble click en la pantalla. Estos iconos que se van creando son draggables. El problema consiste en que yo puedo soltar los iconos unos sobre otros y no se cómo hacer para evitar que el programa deje que suelte un icono sobre otro. Quisiera que cuando suelta el icono sobre otro vuelva a su lugar original y lo rechace. Probé con greedy: true en el droppable, y tambien con stopProgagation pero no funciona.

Aqui dejo el codigo:

$(document).ready(function(){
var i  = 0;
var counter = 0;

function newTimer(x,y) {

  var id = "#" + "timer" + counter;

  var clock = '<div id ="timer'+ counter + ' " class="ui-widget-content timer" '
  + ' style = "left: ' + x + 'px ; top: ' + y + 'px "><i class = "fa fa-clock-o fa-4x" aria-hidden = "true"> </i></div>';

  $('#content').append($(clock));

  $(".timer").draggable( {
    cointainment: "#content",
    snap: true,
    revert: "invalid"});
  counter++;
}

$("#content").droppable({
   greedy: true,
   accept: ".timer",
   drop: function( event, ui ) {
      i++;
      console.log("Lo soltaste " + i);
   }
});


$("#content").on( "dblclick", function(e) {
  var pos = $(this).offset();
  var posX = e.pageX - pos.left;
  var posY = e.pageY - pos.top;
  console.log("posicion x = " + posX);
  console.log("posicion y = " + posY);
  newTimer(posX,posY);
});
});

Agradecería que me pudieran guiar al respecto. Las versiones de Jquery son jquery-2.2.4 y jquery-ui-1.11.4.

3 respuestas 3

2

Primero voy a hacer un par de cambios de cosas que o bien estaban mal o bien me estaban dando problemas:

  • La propiedad es containment y no cointainment
  • No se especifica una posición para el .timer lo que me daba problemas así que se lo especifiqué un position:absolute (y un position:relative al contenedor que no sé si tenía)

Tu puedes deshacer estos cambios si quieres.

Con esos pasos previos hechos, lo que tienes que hacer es definir una función para revert. Ese parámetro sirve para indicar si el elemento debe volver a la posición original o no, puede tener como valor un booleano, una cadena (lo que tienes) o una función.

Si revert devuelve true entonces el elmento se devuelve a su posición original; si no, se permite el drag-drop. Lo que harías sería crear una función que compruebe si ya existe algún otro elemento timer que esté en esa misma posición, y si lo hay, devolver true para que no se haga el drop. El código de revert sería así:

revert: function() {
            var current = $(this)[0];
            var found = false;
            $(".timer").not(this).each(function() {
                if (this.style.top == current.style.top && 
                    this.style.left == current.style.left) { 
                        found = true; 
                        return true; }
            });
            return found;
        }

Y puedes ver como funciona en esta demo:

$(document).ready(function(){
  var i  = 0;
  var counter = 0;

  function newTimer(x,y) {

    var id = "#" + "timer" + counter;

    var clock = '<div id ="timer'+ counter + ' " class="ui-widget-content timer" '
    + ' style = "left: ' + x + 'px ; top: ' + y + 'px; position:absolute;"><i class = "fa fa-clock-o fa-4x" aria-hidden = "true"> </i></div>';

    $('#content').append($(clock));

    $(".timer").draggable( {
      containment: "#content",
      snap: true,
      revert: function() {
        var current = $(this)[0];
        var found = false;
        $(".timer").not(this).each(function() {
          if (this.style.top == current.style.top && this.style.left == current.style.left) { found = true; return true; }
        });
        return found;
      }
    });
    counter++;
  }

  $("#content").droppable({
    greedy: true,
    accept: ".timer",
    drop: function( event, ui ) {
      i++;
      console.log("Lo soltaste " + i);
    }
  });


  $("#content").on( "dblclick", function(e) {
    var pos = $(this).offset();
    var posX = e.pageX - pos.left;
    var posY = e.pageY - pos.top;
    console.log("posicion x = " + posX);
    console.log("posicion y = " + posY);
    newTimer(posX,posY);
  });
});
#content {
  width:400px;
  height:400px;
  background:#eee;
  position:relative;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>

<div id="content"></div>

0

Aca te dejo un ejemplo que te pueda servir: http://jsfiddle.net/J7azG/37/

0

Te aconsejo usar las librerias swingdrag.js y ripples.js

Cuando tenes tus elementos html (imagenes en mi caso)

<img id="objeto1" src="images/jirafa.png" class = "draggable-jirafa"/>

<img id="silueta1" src="images/jirafa_sombra2.png" class = "droppable-jirafa"/>

Despues es cuestion de asignar la funcion draggable al elemento por su id

$('#objeto1').draggable({
            containment: "#form1",
        revert: true });

Y al otro elemento, la funcion droppable:

$('#silueta1').droppable({
            tolerance: 'fit',
            hoverClass: 'active',
            accept: "#objeto1",
            drop: function(e, ui) {
                $(this).html(ui.draggable.remove().html());
                $(this).droppable('destroy');
                $( this )
                //.addClass( "ui-state-highlight" )
                .attr("src", "https://image.ibb.co/gAhVay/jirafa.png");
            }
        });

Despues con el css configuras los elementos a su gusto y ya esta listo.

Te dejo un ejemplo mas simplificado para que lo entiendas mejor: https://jsfiddle.net/8bgo5wd3/8/

Y un ejemplo mas completo con varios elementos draggable y droppable: http://zooplays.com/Siluetas

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.