No se puede obtener el trabajo de arrastre / gotepable en Shopify Library -- javascript campo con shopify campo con draggable camp Relacionados El problema

Can't get draggable/droppable work in shopify library


1
vote

problema

Español

No pude obtener shopify / draggable trabajo para mí. En realidad solo necesito

  1. arrastra un elemento
  2. captura cuando se cae en un lienzo
  3. hacer algunas cosas en lienzo

Intenté trabajar solo con DIVS y aquí está mi intento: https://jsfiddle.net/1v4el8oz / 6 /

  const containers = document.querySelectorAll('.block')  const droppable = new Draggable.Droppable(containers, {   draggable: '.draggable',   droppable: '.droppable' });  droppable.on('drag:start', () => console.log('drag:start')); droppable.on('droppable:over', () => console.log('droppable:over')); droppable.on('droppable:out', () => console.log('droppable:out'));   

Noté que Drag: Start se despidió, y eso es todo. ¿Qué estoy haciendo mal?

Original en ingles

I couldn't get shopify/draggable work for me. Actually I just need to

  1. Drag an element
  2. Catch when it's dropped on a canvas
  3. Do some stuff on canvas

I tried to work just with divs and here is my attempt: https://jsfiddle.net/1v4eL8oz/6/

const containers = document.querySelectorAll('.block')  const droppable = new Draggable.Droppable(containers, {   draggable: '.draggable',   droppable: '.droppable' });  droppable.on('drag:start', () => console.log('drag:start')); droppable.on('droppable:over', () => console.log('droppable:over')); droppable.on('droppable:out', () => console.log('droppable:out')); 

I noticed that drag:start gets fired, and that's it. What am I doing wrong?

        

Lista de respuestas

2
 
vote

Es una gran pérdida de la biblioteca y aún más grande, de su documentación, pero, cuando usa Droppable , debe cubrir cualquier elemento para Draggable Droppable contenedores, como si fueran las otras gotas. Pero, para aquellos contenedores, incluidos sus elementos draggable , son algunas reglas:

  1. puede ser solo uno draggable elemento dentro;
  2. debe estar con draggable-goodzone-goodzone - Ocupado clase;
  3. Debe estar en contenedores DIV o elemento, como cualquier cosa sobre dragable o gappable .
  4. .

Entonces, su JSFiddle necesita mirar de alguna manera así:

  (error.details || []).map(e=>e.message) 1  
  (error.details || []).map(e=>e.message) 2  
  (error.details || []).map(e=>e.message) 3  

Ejemplo de trabajo

Se explicó aquí

 

It is big loss of library an even bigger - of their documentation, but, when you use Droppable, you need to cover any your Draggable elements to Droppable containers, like it is the another dropzones. But, for those containers including your Draggable elements, it is some rules:

  1. It can be only one Draggable element inside;
  2. It need to be with draggable-dropzone--occupied class;
  3. It need to be in containers div or element, like anything about Draggable or Droppable.

So, your jsfiddle need to look somehow like this:

const containers = document.querySelectorAll('.block')    const droppable = new Draggable.Droppable(containers, {    draggable: '.draggable',    droppable: '.droppable'  });    droppable.on('drag:start', () => console.log('drag:start'));  droppable.on('droppable:over', () => console.log('droppable:over'));  droppable.on('droppable:out', () => console.log('droppable:out'));
.draggable, .droppable.draggable-dropzone--occupied{    width: 100px;     height: 100px;   }  .droppable{    width: 300px;     height: 300px;  }
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.5/lib/draggable.bundle.js"></script>    <div class="block">        <div style="background-color: black" class="droppable draggable-dropzone--occupied">          <div style=" background-color: red" class="draggable"></div>        </div>  </div>        <div class="block">        <div style="background-color: #eee" class="droppable"></div>      </div>

Working example

It was explained here

 
 

Relacionados problema

2  Actualización de rieles Has_many a través de jQuery Draggable Droppable y Hidden_Field_Tag  ( Rails update has many through jquery draggable droppable and hidden field tag ) 
Estoy haciendo una pantalla donde las personas "votan" por las imágenes favoritas de cada uno arrastrándolas de una galería a una bandeja. Estoy usando jQuery...

0  Manejo de jQuery Draggable con PHP Loop  ( Handling jquery draggable with php loop ) 
Tengo un bucle PHP que crea un montón de cajas pobladas con datos MySQL como esta: <?php //display boxes while ($list = $result->fetch_assoc()) { ...

0  Problema Ordenable y Droppable con cambios 'ConnectTosortable' Cambios DOM Estructura  ( Sortable droppable issue with connecttosortable changes dom structure ) 
Estoy creando una herramienta para construir un constructor de formulario de clases usando jQuery UI .draggable , .sortable y .droppable FUNCIONES . La ...

3  ¿Cómo puedo reducir los artículos de arrastre en zonas caídas que contiene zonas caídas de los niños en EXT JS?  ( How can i drop drag able items into drop zone which contains children drop zones ) 
Estoy enfrentando un problema con el EXT JS arrastrar y soltar zonas y tratar de hacerlo funciona como esperaba: Por favor, eche un vistazo a mi Fiddle . ...

0  Cómo configurar el Max Drag en jquery-ui  ( How to set the max drag on jquery ui ) 
Estoy creando un menú lateral en la sala de fotografía, necesito arrastrar a la izquierda con un límite de ancho -400px, y a la derecha con un límite de 400px...

0  JQueryui Draggable desactiva los eventos de mouseOver / MouseOut para elementos con valores "Z-índice" <0  ( Jqueryui draggable disables mouseover mouseout events for elements with z index ) 
Si se arrastra un elemento de dragable UI jQuery (# box1) sobre un elemento (# box2) que tiene un conjunto de índice z a -1 o menos, los usos de mouse y los e...

0  JQUERY DRAZGABLE / Base de datos de actualización directa con AJAX  ( Jquery draggable droppable update database with ajax ) 
Tengo divecciones de arrastre que se crean con una información de agarre de PHP Loop de una base de datos MySQL. Código: <script> $(function() { ...

4  Cómo deshabilitar Draggable Div cuando la barra de desplazamiento está enfocada en jQuery  ( How to disable draggable div when scroll bar is focused on in jquery ) 
Tengo un ex contenedor de jQuery draggable DIV con una barra de desplazamiento lateral que no debe ser arrastrable cuando se desplaza hacia arriba y hacia aba...

0  Imagen de la cartera de películas usando jQuery  ( Movie portfolio image using jquery ) 
Estoy desarrollando mi sitio web de portafolio. Los diseños de mis sitios web son muy grandes en tamaño 1600x900 min porque los diseñé en una pantalla ancha p...

20  Swing: creando un componente de arrastre ...?  ( Swing creating a draggable component ) 
Busqué en la web para ejemplos de componentes de swing de arrastre, Pero encontré ejemplos incompletos o no laborales. Lo que necesito es un componente de ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos