Pobieranie z elementów drag nad drop odpowiednich danych.

Odpowiedz Nowy wątek
2015-02-01 23:30
0

Więc tak zrobiłem sobie przekładanie elementów < li > za pomocą metody drag and drop. Wykorzystałem taką bibliotekę (jeśli można tak to nazwać)


function handleDragStart(e) {
  this.style.opacity = '0.4';  // this / e.target is the source node.

}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
});
function handleDragStart(e) {
  this.style.opacity = '0,7';  // this / e.target is the source node.

}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add('over');

}

function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false);
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
});

function handleDrop(e) {
  // this / e.target is current target element.

  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  }

  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnd(e) {
  // this/e.target is the source node.

  [].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });
}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false)
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
  col.addEventListener('drop', handleDrop, false);
  col.addEventListener('dragend', handleDragEnd, false);
});

var dragSrcEl = null;

function handleDragStart(e) {
  // Target (this) element is the source node.
  this.style.opacity = '0.7';
****** ------> w tym miejscu mamy dostęp do elementu który jest dopiero co klikany<------- *******

  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDrop(e) {
  // this/e.target is current target element.

  if (e.stopPropagation) {
    e.stopPropagation(); // Stops some browsers from redirecting.
  }

  // Don't do anything if dropping the same column we're dragging.
  if (dragSrcEl != this) 
       {

****** ------> tutaj możemy zamieścić kod który się wykona na elemencie po zmianie miejsc, po upuszceniu <------- *******

    // Set the source column's HTML to the HTML of the column we dropped on.
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');

     }

  return false;
}

elementy zaś mam mniej więcej takie takie.


<div class="dol"><li class="column" draggable="true" data-name="'nazwa_miejsca'" >
                    nazwa jakas tam
                    </li></div>

Jak można zauważyć w data-name umieściłem nazwę miejsca. Właśnie o te miejsce chodzi.
Bowiem pewne elementy li są porozmieszczane w różnych miejscach, (tabelkach) którą umieszczam w data-name. Oczywiście mogę umieścić ja jeszcze gdzie indziej: ). Potrzebuję zrobić tak aby elementy mogły się zamieniać tylko wtedy kiedy mają te same miejsce w data-name, próbowałem w różny sposób to zrobić za pomocą wyżej zamieszconego scryptu javascript. Niestety bez większych rezultatów.

Pozostało 580 znaków

2015-02-02 11:58
0

musisz pododawac sprawdzenia czy atrybut data-name jest zgodny i jeskli n ie to przerywac operacje. musi to byc w momencie gdy dany obiekt jest nad drugim obiektem, czyli pewnie: handleDragOver i kiedy chcesz upusci, zeby na to nie zezwolic(handleDrop). te funkcje dostaja w parametrze zdarzenie i w target poszukaj tych dwoch elementow i je sprawdz.

Pozostało 580 znaków

2015-02-02 15:12
0

No własnie próbowałem i cały trik polega na tym że gdy próbuje zrobić to przez

 $(this).data('name');

To pisze że nie niezdefiniowano. Ale jak wyświetlę

 this.innerHTML

To wyświetla cały element jakby wszystko było ok. Dojść jednak jest mi ciężko do jego artybutów. Nie wiem co robię nie tak.

Pozostało 580 znaków

2015-02-02 15:26
0

bo this to nie twoj element a jego rodzic na co wskazuje innerHTML. innerHTML pokazuje co jest w srodku (cos jak .html() z jquery, czyli jesli dostajesz twoj element to jest on zawartoscia elementu z this, uzyj .find do znalezienia twojego obiektu i wtedy sprawdz atrybut data. (mala dygresja, zapoznaj sie z rozncia miedzy $(elem).data("costam") i $(elem).attr("data-costam") => http://stackoverflow.com/questions/7261619/jquery-data-vs-attr wydajnosc, kompatybilnosc itp.)

edytowany 2x, ostatnio: szalonyfacet, 2015-02-02 15:26

Pozostało 580 znaków

2015-02-02 15:32
0

Mógłbyś podać przykład? Bo ja używałem .find np tak.

$(this).find('li.column').data('name');

I też jakieś szopki mi wychodziły.

Pozostało 580 znaków

2015-02-02 15:50
0

uzywaj console.log takze do wywalania calych obiektow, potem po najechaniu w konsoli mzoesz zrobic scroll to view i pokaze ci element w DOMie. lub uzyj outerHTML a wtedy zobaczysz cale html tego obiektu.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0