Pobieranie z elementów drag nad drop odpowiednich danych.

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.

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.

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.

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.)

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.

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.

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