Tweet
hi!
ich habe mir ein drag and drop system gebastelt:
demolink: demo
das problem ist eine (anscheinend) überlastung des scipts, zumindest frierst irgendwann mein browser ein (firefox 7.0.1 und IE9 -> und andere browser wohl auch).
ich kann z.b. alle boxen zügig in einen großen kasten ziehen und wenn ich dann gleich diese kleinen boxen, dann in ein anderes großes fenster ziehe, dann hängt es bei der 5. und 6 box auf einmal.
da weiß ich auch nicht mehr weiter.
kann mir bei den problemen bitte einer helfen?
ich wollt es ins offzielle jquery forum schreiben, aber dort gibt es leider keine rubrik für dt. sprachige leute und engl. kann ich nicht gut genug.
ich habe mir ein drag and drop system gebastelt:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>nix</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.demo div{float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align:center}
.ui-helper-reset { margin:0; padding:0; border:0; outline:0; line-height:1.3; text-decoration:none; font-size:12px; list-style:none}
.Box {position:relative; left:50px; width:90px; height:90px; border:1px solid #6f6f6f}
.demoS{position:relative; width:100px; height:650px; padding:5px; border:1px solid #fcc07c; background-color:#fdf5ec}
#demo {position:absolute; top:50px; left:20px; width:300px; min-height:150px; padding:5px; border:1px solid #fcc07c; background-color:#fdf5ec}
#droppi {position:absolute; top:50px; left:550px; width:300px; min-height:150px; padding:5px; border:1px solid #fcc07c; background-color:#fdf5ec}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.draggable.js"></script>´
<script src="js/jquery.ui.position.js"></script>
<script src="js/jquery.ui.droppable.js"></script>
<script src="js/jquery.ui.resizable.js"></script>
<script src="js/jquery.ui.dialog.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){zielkasten($(".ZielK"));});
function zielkasten(obj)
{
var Box = "#" + $(obj).attr('id');
var $Ziel = $(Box);
$(".DUDBoxen").draggable({
revert: "invalid",
containment: $( "#demo-frame" ).length ? "#demo-frame" : "document",
opacity: 0.5,
helper: "clone",
cursor: "move",
cursorAt: { top:0,left:-20}
});
$Ziel.droppable({
drop: function( event, ui )
{deleteImage( ui.draggable );}
});
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( ".DUDBoxen", $Ziel).length ?
$( "div", $Ziel) :
$( "<div class='demo ui-helper-reset'/>" ).appendTo($Ziel);
$item.appendTo($list).fadeIn();
});
}
}
</script>
</head>
<body>
<div onmouseover='zielkasten(this)' id='test' class='ZielK demoS' style='position:absolute; top:50px; left:900px'></div>
<div onmouseover='zielkasten(this)' id="demo" style='left:200px' class='ZielK demoS'></div>
<div onmouseover='zielkasten(this)' id="droppi" class='ZielK demoS'></div>
<div style='position:absolute; top:50px; z-index:2'>
<div id="1"class="Box DUDBoxen">los</div>
</div>
<div style='position:absolute; top:150px; z-index:2'>
<div id="2" class="Box DUDBoxen">los</div>
</div>
<div style='position:absolute; top:250px; z-index:2'>
<div id="3" class="Box DUDBoxen">los</div>
</div>
<div style='position:absolute; top:350px; z-index:2'>
<div id="4" class="Box DUDBoxen">los</div>
</div>
<div style='position:absolute; top:450px; z-index:2'>
<div id="5" class="Box DUDBoxen">los</div>
</div>
<div style='position:absolute; top:550px; z-index:2'>
<div id="6" class="Box DUDBoxen">los</div>
</div>
</body>
</html>
demolink: demo
das problem ist eine (anscheinend) überlastung des scipts, zumindest frierst irgendwann mein browser ein (firefox 7.0.1 und IE9 -> und andere browser wohl auch).
ich kann z.b. alle boxen zügig in einen großen kasten ziehen und wenn ich dann gleich diese kleinen boxen, dann in ein anderes großes fenster ziehe, dann hängt es bei der 5. und 6 box auf einmal.
da weiß ich auch nicht mehr weiter.
kann mir bei den problemen bitte einer helfen?
ich wollt es ins offzielle jquery forum schreiben, aber dort gibt es leider keine rubrik für dt. sprachige leute und engl. kann ich nicht gut genug.
Kommentar