Pregunta ¿Cómo puedo usar jQuery para hacer un snap item dentro de un div?


Estoy intentando recrear la barra de acción de World of Warcraft con fines de aprendizaje.

Hasta ahora tengo la barra, y las ranuras individuales son Droppable. ¿Qué puedo hacer si el div amarillo se deja caer dentro del contenedor, se centra DENTRO del div.

@{
    ViewBag.Title = "Home Page";
}

<script language="JavaScript">
    $(function () {
        $(".draggable").draggable();
        $(".item").droppable({
            drop: function (event, ui) {
                $(this)
                .addClass("ui-state-highlight")
                .find("p")
                    .html("Dropped!");
            }
        });
    });
</script>

<div class="draggable">
</div>
<div class="bar">
    <div class="item">
    <p>a</p>
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>    
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

alt text


7
2018-01-05 02:15


origen


Respuestas:


Qué tal esto:

$(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    

            var width = $this.width();
            var height = $this.height();
            var cntrLeft = width / 2 - ui.draggable.width() / 2;
            var cntrTop = height / 2 - ui.draggable.height() / 2;

            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

Editar: Noté que tienes un texto en el objetivo div. Si desea que esto funcione con otros elementos en la tabla desplegable, puede colocar el elemento arrastrado de forma absoluta y compensarlo utilizando left y top del padre:

var width = $this.width();
var height = $this.height();
var top = $this.offset().top;
var left = $this.offset().left;

var cntrLeft = (width / 2 - ui.draggable.width() / 2) + left;
var cntrTop = (height / 2 - ui.draggable.height() / 2) + top;

Y:

ui.draggable.css({
    left: cntrLeft + "px",
    top: cntrTop + "px",
    zIndex:1,
    position: 'absolute'
});

Notas:

  • ui.draggable es el elemento arrastrable que se soltó en el droppable.
  • $this.append(ui.draggable) Agrega el elemento arrastrado al droppable div para que el posicionamiento pueda hacerse con precisión.

Vea un ejemplo en vivo aquí: http://jsfiddle.net/andrewwhitaker/F3sD3/


7
2018-01-05 03:05