2010-10-19 83 views
0

我想恢復紅塊的位置,它是綠色和灰色塊上的可拖動div,而不是藍色塊,它不適用於綠色塊,但它在灰色塊上工作,請幫助我......爲此目的,我我正在使用jQuery恢復。代碼和LNK下面請大家幫我 http://galtech.org/testing/drag.phpjQuery的可拖動有拖動的問題?

<style type="text/css"> 
    #draggable { width: 100px; height: 70px; background: red; } 
    #nodrag { width: 200px; height: 270px; background: #00CC66; } 
    </style> 

</head> 
<body > 
<div style="background:#CCCCCC;"> 
    <div id="droppble_blue" style="background:#99CCCC; height:500px; width:620px;"> 
     <div id="draggable" >Drag</div> 
     <div id="nodrag" class="new">no Drag & drop here</div> 
    </div> 
</div> 
</body> 
</html> 
    <script> 
    $(document).ready(function() { 
    $("#draggable").draggable({ revert: "invalid" }); 
    $("#droppble_blue").droppable({drop: function() { alert('dropped');}}); 
    }); 
    </script> 
+0

該還原一個顯而易見的方法是有可能的綠色塊,因爲藍色的塊是父的綠色div – shahul 2010-10-19 10:45:36

回答

0

我沒有使用jQuery的可拖動,但會

$("#nodrag").droppable({drop: function() { $('#draggable').css({top:'0px',left:'0px'});}}); 

工作?

進一步展望拖動的東西沒有用有效的元素,裏面塊,所以我會做folllowing

$("#draggable").draggable('option', 'start', function(){ 
    //when drag starts save the positions somewhere 
    $(this).data('left',$(this).css('left')).data('top',$(this).css('top')) 
}); 
$("#nodrag").droppable({drop: function(e,ui) { 
    //when dropped on an invalid block move it back to where it was (you could change this to animate to mimic revert) 
    $(ui.draggable) 
    .css({left:$(ui.draggable).data('left'),top:$(ui.draggable).data('top')}); 
}});