Jump to content

Archived

This topic is now archived and is closed to further replies.

LuanMartinsTI

draggable Não funciona

Recommended Posts

Fala galera blz, não tenho muito intimidade com javascript, mas consigo fazer bastante coisa, estou passando por um problema com draggable, fiz a função para arrastar a div no servidor local, mas quando passo para o servidor do website ele não funciona, fui no IS e verifiquei os logs do navegador, me exibiu o seguinte erro

 

===> http://prnt.sc/ew29ps

 

MSG 

Uncaught TypeError: $(...).draggable is not a function
    at HTMLDocument.<anonymous> ((index):64)
    at j (jquery-1.11.3.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.11.3.min.js:2)
    at Function.ready (jquery-1.11.3.min.js:2)
    at HTMLDocument.J (jquery-1.11.3.min.js:2)

Como posso arrumar?

Share this post


Link to post
Share on other sites

Você está usando jQueryUi ? 

Tenta verificar se os scripts estão sendo chamados, no network.

Ou não está sendo carregado o  script do draggable  ou o script do draggable está executando antes dos arquivos js serem carregados, coloca seu código dentro do document,ready.

Share this post


Link to post
Share on other sites

está funcionando no seu local?

não esta reconhecendo seu draggable, mas então posta seu código ai.

mas eu ainda acho que está faltando o jQueryUI ou script do draggable

Share this post


Link to post
Share on other sites

Servidor local está faltando, desculpa esqueci de postar o codigo, aqui vai

chamadas

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

codigo

<script>
            $( function() {
              function position() {
                $( ".positionable" ).position({
                  of: $( "#arrastarplayer" )
                });
              }
              $( ".atualizarradio" ).draggable({ axis: "x" });
              position();
            } );
        </script>

 

Share this post


Link to post
Share on other sites
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<!-- Tenta talvez assim tbm => <script src="/js/jquery-1.11.3.min.js" type="text/javascript"></script> -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

Acho que você não precisa chamar 2x o jquery aqui, e qualquer coisa tenta colocar /js/jquery ... no src, mas antes disso

faz isso: 

$(document).ready(function(){
  function position() {
    $( ".positionable" ).position({
      of: $( "#arrastarplayer" )
    });
  }
  $( ".atualizarradio" ).draggable({ axis: "x" });
  position();
} );

Share this post


Link to post
Share on other sites

pra dar certo, tive que colocar o codigo la no body, estava no head, mas fiz essa parte do document ai ta file, só com um problema q a div passa dos limites do monitor e faz criar scrool horizontal mesmo com overflow hidden, vlw ae

Share this post


Link to post
Share on other sites
3 minutos atrás, LuanMartinsTI disse:

pra dar certo, tive que colocar o codigo la no body, estava no head, mas fiz essa parte do document ai ta file, só com um problema q a div passa dos limites do monitor e faz criar scrool horizontal mesmo com overflow hidden, vlw ae

Prazer em ajudar :D

Share this post


Link to post
Share on other sites

  • Similar Content

    • By MrCharset
      Boa noite a todos. Olhem, por favor, este trecho de código:
       
      $("#E25").click(function()
              {
                  setTimeout(function()
                  {
                      document.getElementById("ter25").id = "t25";
                      document.getElementById("E25").style.display = "none";
                  }, 2000);
                  
                  $(".class").draggable
                  ({
                      containment: "#d1", connectToSortable: "#ter25"    
                  });
                  
                  $("#ter25").droppable
                  ({
                      hoverClass: "ter-ativo",
                      drop: function() 
                      {
                          push($(this).html());
                      }
                  });
              });
       
      Eu tenho um botão de id E25.
       
      Quando clico nele, divs membras da classe class (criatividade) tornam-se arrastáveis.
       
      Essas mesmas divs podem ser "droppadas" em outra div, de id ter25.
       
      Porém, preciso que apenas uma div da classe class seja "droppada" na ter25.
       
      Então, criei uma função que muda o id da ter25 para t25. Essa funçao é executada 2 segundos após o clique no botão E25.
       
      Assim, pensei eu, as divs da classe class não vão mais poder ser "droppadas". Mas me enganei. 
       
      Por quê?!!! O que determina a div droppable é seu id, e eu mudei seu id!
    • By buschdead
      Estou com um problema com draggable. o código funciona normal! mais quando eu adiciono via jquery um novo código o draggable não funciona!
       
      O que pretendo fazer:
       
      Eu quero criar um construtor de html de forma que eu coloque os elementos e possa distribuir ele aonde eu quiser no corpo do HTML como um WIX porem mais simples! o draggable deixa eu arrastar o elemento na tela como eu quero. porem se eu adicionar um novo elemento via jquery este elemento fica travado! vou deixar meu codigo que está funcionando 'EM PARTE':
       
      Me ajudem por favor!
       
      este é o index:
       
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="css/jquery-ui.css"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> </head> <body> <iframe src="template2.html" width="1000px" height="600px"> </iframe> </body> </html> Este é o iframe:
       
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="css/jquery-ui.css"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <style> *, *:before, :after { box-sizing: border-box; } * { margin: 0; padding: 0; } .clearfix:after { content: '.'; display: block; clear: both; height: 0; font-size: 0; line-height: 0; visibility: hidden; overflow: hidden; } body { font-family: sans-serif; font-size: 14px; line-height: 1.5; margin: 20px; } /* Drag e Drop system */ .drag-container, .drop-container { width: 50%; background: #333; font-size: 0; text-align: center; float: left; color: #fff; height: 190px; } .drag, .placeholder { font-size: 12px; width: 90%; height: 50px; line-height: 50px; background: #0074a2; margin: 10px auto; } .drop-container { background: #222; } .drop-container p { font-size: 18px; line-height: 190px; } .placeholder { background: none; border: 1px dotted #eee; } .lixeira { margin: 20px 0; background: #ddd; border: 2px dotted #999; text-align: center; line-height: 50px; color: #999; font-weight: 700; font-size: 18px; } .lixeira-ativa { border: 2px dotted red; } </style> <script> $(function(){ $('.drag').draggable(); $('.drop-container').sortable({ placeholder: 'placeholder', activate: function(event, ui){ $('.drop-container p').remove(); } }); $('.lixeira').droppable({ hoverClass: 'lixeira-ativa', drop: function(event, ui) { $(ui.draggable).remove(); } }); $('.salvar').click(function(){ var valores = new Array(); $('.drop-container .drag').each(function(){ valores.push( $(this).html() ); }); alert(valores); }); }); function addText(){ $(".drag-container").append("<div class='drag' style='position:relative;'><p>Test</p></div>"); } function addImg(){ $(".drag-container").append('<div class="drag"><img width="30px" height="30px" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" /></div>' ); } </script> </head> <body> <button onclick="addText();">ADD Texto</button> <button onclick="addImg();">ADD Img</button> <div class="drag-drop clearfix"> <div class="drag-container clearfix"> <div class="drag">1</div> <div class="drag">2</div> <div class="drag">3</div> </div> <!-- .drag-container --> <div class="drop-container clearfix"> <p>Arraste números aqui</p> </div> <!-- .drop-container --> </div> <!-- .drag-drop --> <div class="lixeira"> Arraste aqui para apagar </div> <!-- .lixeira --> <button class="salvar">Salvar</button> </body> </html>  
      Vou disponibilizar um link online para vocês observarem o problema!
       
      Segue o link
       
      http://infotechfacil.com.br/dinamico/
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.