Ines: jquery draggable

Hallo,

ich habe ein Array aus Zahlen. Je Element erstelle ich ein div und mache es mit jquery "draggable". Das funktionert. Nun möchte ich das Array per "$.ajax({..." dynamisch füllen. Das geht auch. Wenn ich nun aber meine Funktin zum erstellen und "draggable" machen aus "$.ajax({...})" heraus aufrufe, werden die divs zwar auch erstellt, sind aber nicht mehr "draggable".

Hier der Code:
Ich habe dem "$.ajax({...})" ein "error: function(){..." verpasst damit man es auch ohne die "adminJson.php" testen kann. Die Funktion, welche die divs baut macht diese nur "draggable" wenn sie von außerhalb der "$.ajax({...})" heraus aufgerufen wird.

<!doctype html>  
<html lang="de">  
<head>  
<meta charset="utf-8">  
<title>Test</title>  
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  
<script src="//code.jquery.com/jquery-1.9.1.js"></script>  
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
<style>  
.myDraggable{  
	width: 150px; height: 150px;  
	border: 1px red solid;  
}  
#myContainer{  
	border: 1px silver solid;  
	height: 600px;  
	width:400px;  
}  
</style>  
<script>  
	$(document).ready(function(){  
		$.ajax({  
			type: "POST",  
			url: "adminJson.php",  
			data: "action="+"getMyElems",  
			success: function(data){  
				myList = $.parseJSON(data);  
		//loadElems();	//Elemente werden geladen, sind aber nicht draggable.  
			},  
			error: function(){  
		//loadElems();	//Elemente werden geladen, sind aber nicht draggable.  
			}			  
		});  
		//loadElems();	//Elemente werden geladen und sind draggable.  
	});  
	  
	$(function() {  
		$( ".myDraggable" ).draggable();  
	});  
	  
	function loadElems(){  
		myList = new Array("1", "2", "3");  
		var container = $("#myContainer");  
		for(i = 0; i < myList.length; i++){  
			newElem = document.createElement("div");  
			newElem.id = myList[i];  
			newElem.className = "myDraggable";  
			newElem.innerHTML = myList[i];  
			container.append(newElem);  
		}  
	}  
</script>  
</head>  
<body>  
<div id="myContainer">  
</div>  
</body>  
</html>  

Was muss ich tun, damit die divs auch bei Aufrufen der Funktion "loadElems()" aus "$.ajax({...})" heraus "draggable" sind?

Gruß

Ines

  1. Hi,

    Was muss ich tun, damit die divs auch bei Aufrufen der Funktion "loadElems()" aus "$.ajax({...})" heraus "draggable" sind?

    draggable() erst dann aufrufen, wenn die Elemente auch im DOM existieren.

    Derzeit machst du das beim load-Event – aber zu dem Zeitpunkt matched $( ".myDraggable" ) die Elemente natürlich noch nicht, weil es sie noch gar nicht gibt.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Om nah hoo pez nyeetz, ChrisB!

      --
      Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/

      Trinkst du jetzt nur noch Tee?

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Sekt und Sektion.