Hello,
I´m German, so sry for english
I´m using the native Drag and Drop from HTML 5 for my Website: http://planning.pytalhost.de/
Dropfunction:
- function drop(ev)
- {
- ev.preventDefault();
- ziel = ev.target.getElementsByClassName('activity');
- if(ev.target.tagName == "TD" && ziel.length == 0) {
- data=ev.dataTransfer.getData("Text");
- quellElement = document.getElementById(data);
- zieltd = quellElement.parentNode;
- if(zieltd.classList[0] != "planning") {
- newDiv = quellElement.cloneNode(true);
- newId = newDiv.id.substring(4);
- newId++;
- newDiv.id = "drag"+newId;
- zieltd.appendChild(newDiv);
- }
- ev.target.appendChild(quellElement);
- }
- }
I needed an multidraggable function and found this:
- $(window).load(function(){
- var selectedObjs;
- var draggableOptions = {
- start: function(event, ui) {
- //get all selected...
- if (ui.helper.hasClass('selected')) selectedObjs = $('div.selected');
- else {
- selectedObjs = $(ui.helper);
- $('div.selected').removeClass('selected')
- }
- },
- drag: function(event, ui) {
- var currentLoc = $(this).position();
- var prevLoc = $(this).data('prevLoc');
- if (!prevLoc) {
- prevLoc = ui.originalPosition;
- }
- var offsetLeft = currentLoc.left-prevLoc.left;
- var offsetTop = currentLoc.top-prevLoc.top;
- moveSelected(offsetLeft, offsetTop);
- $(this).data('prevLoc', currentLoc);
- }
- };
-
- // Klasse welcher die Dragfunktion zugewiesen wird
- $('.activity').draggable(draggableOptions).click(function(){$(this).toggleClass('selected')});
- function moveSelected(ol, ot){
- console.log("moving to: " + ol + ":" + ot);
- selectedObjs.each(function(){
- $this =$(this);
- var p = $this.position();
- var l = p.left;
- var t = p.top;
- console.log({id: $this.attr('id'), l: l, t: t});
- $this.css('left', l+ol);
- $this.css('top', t+ot);
-
- })
- }
- });
but i cant´t found anyway or have any idea´s to add my drop function to this example, i´m a newbie in Javascript and need help.
Can anyone help me?
big thx!