Como tornar objetos arrastáveis e soltáveis

ny123

Segui este tutorial no YT https://www.youtube.com/watch?v=8vs-SF2UWy4&t=28s Desculpe antecipadamente se cometi algum erro aqui, eu só comecei a aprender, mas tenho que fazer móveis arrastáveis ​​e soltáveis que posso mova os objetos

aqui está o código que escrevi

    <div class="wrap">
        <div id="home">
            <div class="image"><img src="A.png" width="200px" alt=""></div>
            <div class="image"><img src="B.PNG" width="240px" alt=""></div>
            <div class="image"><img src="C.PNG" width="250px" alt=""></div>
            <div class="image"><img src="D.PNG" width="210px" alt=""></div>
            <div class="image"><img src="E.PNG" width="290px" alt=""></div>
            <div class="image"><img src="F.PNG" width="240px" alt=""></div>
            <div class="image"><img src="G.PNG" width="250px" alt=""></div>
            <div class="image"><img src="H.PNG" width="220px" alt=""></div>

        </div>
    </div>
    

<script scr="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"></script>
<script type="text/javascript">
    $(function (){
       $("#home .image").draggable();
    });
</script>
Joe

Veja o exemplo de trabalho no snippet. Você precisa incluir jQueryantes jQuery UI.

    $(function (){
       $(".image").draggable();
    });
.image {
background:yellow;
width:200px;
height:200px;
margin-bottom:1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="wrap">
        <div id="home">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como mover objetos arrastáveis entre a área de origem e a área de destino com jQuery

Como podemos tornar o elemento arrastável e soltável se já estiver no contêiner?

jquery droppable / html5 api - como tornar o elemento soltável e arrastável

tornar vários marcadores arrastáveis

Angular 5: como tornar componentes criados dinamicamente arrastáveis com jsPlumb?

Diretiva Angularjs para tornar o elemento HTML arrastável e os campos HTML dentro dele selecionáveis ou modificáveis

Como tornar o AVPlayer e o AVPlayerLayer roláveis (AVFoundation)

Como tornar visíveis e ocultar divs específicos?

Como tornar o AVPlayer e o AVPlayerLayer roláveis (AVFoundation)

Como tornar CollectionView e TableView roláveis ao mesmo tempo?

Como definir um limite máximo de itens arrastáveis que podem ser soltos em uma categoria soltável no jqueryui?

Problema em tornar várias imagens arrastáveis

Tornar alguns objetos invisíveis quando clicados, usando apenas HTML e CSS, sem JS ou jQuery

Tornar alguns objetos invisíveis quando clicados, usando apenas HTML e CSS, sem JS ou jQuery

Como tornar uma série de objetos visíveis para outras funções

Como tornar uma série de objetos visíveis para outras funções

Linhas e colunas aninhadas angulares arrastáveis

JQuery e Rails classificáveis e arrastáveis

Divs arrastáveis e redimensionáveis com Z-index

Comportamentos de JQuery classificáveis e arrastáveis

Imagens redimensionáveis e arrastáveis dentro de div

Como anexar <li> a <ul> usando arrastável e soltável?

Como tornar os ambientes virtuais conda persistentes e disponíveis para ferramentas como o Jupyter Notebook?

Como tornar TextBoxes desativados selecionáveis?

Como tornar os marcadores clicáveis no Imageview

Como tornar casos pytest "executáveis" no IntelliJ

Como tornar os valores ilegais irrepresentáveis?

Como posso tornar os recursos alternáveis?

Como tornar as ondulações mais visíveis?

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    UITextView não está exibindo texto longo

  3. 3

    Dependência circular de diálogo personalizado

  4. 4

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  5. 5

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  6. 6

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  7. 7

    Setas rotuladas horizontais apontando para uma linha vertical

  8. 8

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  9. 9

    Definir um clipe em uma trama nascida no mar

  10. 10

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  11. 11

    Como dinamizar um Dataframe do pandas em Python?

  12. 12

    regex para destacar novos caracteres de linha no início e no fim

  13. 13

    Why isn't my C# .Net Core Rest API route finding my method?

  14. 14

    Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

  15. 15

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  16. 16

    How to create dynamic navigation menu select from database using Codeigniter?

  17. 17

    Como recuperar parâmetros de entrada usando C #?

  18. 18

    Changing long, lat values of Polygon coordinates in python

  19. 19

    Livros sobre criptografia do muito básico ao muito avançado

  20. 20

    Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset

  21. 21

    Pesquisa classificada, conte números abaixo do valor desejado

quentelabel

Arquivo