Drag and drop only works with two clicks

Question

Drag and drop only works with two clicks

Navigation

#1 by (2 votes)

0

I'm having trouble dragging and dropping items on my list. I can only hold and drag an item after giving a single click on it. Does anyone know how I solve this? Here is my code:

<ul id="sortable">
<li>
    <a>
    <span class='item' style='cursor: pointer;' onmouseup='atualizaposicao(this.id);' id='1'>Maçã</span>
    </a>
</li>
<li>
    <a>
    <span class='item' style='cursor: pointer;' onmouseup='atualizaposicao(this.id);' id='2'>Biribinha</span>
    </a>
</li>
<li>
    <a>
    <span class='item' style='cursor: pointer;' onmouseup='atualizaposicao(this.id);' id='3'>Astronauta</span>
    </a>
</li>

function atualizaposicao(id) {
    var id;
    $("#sortable").sortable({
        start: function(event, ui) {
            ui.item.startPos = ui.item.index();
        },
        update: function(event, ui){

            console.log("Posição inicial: " + ui.item.startPos + " Nova posição: " + ui.item.index());

            var itens = $(this).children();
            console.log("Quantidade de itens: " + itens.length);

            itens.each(function(){
                var item = $(this).children();

                var newVal = $(this).index() + 1;
                $(item).children('.index').html(newVal);

            });

            console.log("***********************************");

            var jqxhr = $.ajax({
                url: "/aleatoriedades.php",
                type: "POST",
                data: {
                    timeout: default_timeout,
                    id: id,
                    acao: "salvar_ordem",
                    novaposicao: ui.item.index(),
                    seed: random()
                }
            })
                    .done(function () {

                    })
                    .fail(function (jqXHR, textStatus) {
                        if (textStatus == 'timeout') {
                            swal("Tempo Esgotado", "Verifique sua conexão e tente novamente em alguns segundos.", "error")
                            return;
                        }
                        swal("Erro", "Ocorreu um erro de comunicação. Verifique sua conexão.", "error")
                    });
        }
     });
    $("#sortable").disableSelection();
}

javascript

asked by anonymous 03.03.2017 / 18:29

1 answer

Go through php array variable Use of enum in the cases of a switch

score 2 · Answer 1

I did a quick test and it seems to me that your problem is to call the function updateapos; s with the MouseUp event, you are running the whole function when the mouse is released (several times, , being necessary to click on an item in the list before sortable works ).

To solve this problem I have slightly changed the function update function code, I basically moved the ajax part to a stop function within sortable strong>.

The change event is called every time an item changes its position;
The update event is called when the user stops moving or some item has changed position;
The stop event is called when the user stops moving (releases the item).

For a full list of events, click here ( link ).

I've also modified the place where the ID was set in the HTML for li instead of span , just because it's easier to get the ID this way and be easier to understand / read.

And finally call the update function when the window loads (add a onload="atualizaposicao();" to the body tag) or do it another way.

JS:

function atualizaposicao() { //Não precisa passar o ID
    $("#sortable").sortable({
        start: function(event, ui) {
            ui.item.startPos = ui.item.index();
        },
        stop: function( event, ui ) {
            console.log("Posição inicial: " + ui.item.startPos + " Nova posição: " + ui.item.index());

            var itens = $(this).children();
            console.log("Quantidade de itens: " + itens.length);

            itens.each(function(){
                var item = $(this).children();

                var newVal = $(this).index() + 1;
                $(item).children('.index').html(newVal);

            });


            var id = $(ui.item).attr("id"); //Pega o ID do item que mudou de posição

            var jqxhr = $.ajax({
                url: "/aleatoriedades.php",
                type: "POST",
                data: {
                    timeout: default_timeout,
                    id: id,
                    acao: "salvar_ordem",
                    novaposicao: ui.item.index(),
                    seed: random()
                }
            }).done(function () {
                //Codigo aqui...
            }).fail(function (jqXHR, textStatus) {
                //Codigo de falha.
            }
     )}});
    $("#sortable").disableSelection();
}

atualizaposicao(); //Remova essa linha se estiver chamando a função com onload.

HTML:

<ul id="sortable">
  <li  id='1'>
      <a href="#">
        <span class='item' style='cursor: pointer;'>Maçã</span>
      </a>
  </li>
  <li  id='2'>
      <a href="#">
        <span class='item' style='cursor: pointer;'>Biribinha</span>
      </a>
  </li>
  <li id='3'>
      <a href="#">
        <span class='item' style='cursor: pointer;' >Astronauta</span>
      </a>
  </li>
</ul>