Bla*_*des 1 html javascript jquery drag-and-drop
我有一个拖放示例,它将可拖动对象恢复到它在可放置div中的原始位置.
我的问题是,当我的可拖动对象上的revert有效时,我能够将对象拖到页面上的不同位置,我的可拖动对象只有当我将它们放入droppable div时才会恢复.
我希望我的可拖动对象可以恢复,无论您将它们拖到页面的哪个位置?
我试过这个有效但不起作用.
{
revert: 'vaild',
stop: function(){
$(this).draggable('option','revert','invalid');
}
Run Code Online (Sandbox Code Playgroud)
我的问题在于,当我将它们放入droppable div时,我的可拖动对象会恢复但不会恢复.
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var dragElemId = ui.draggable[0].id;
var imgPath = $('#' + dragElemId).attr("des-image");
$( this )
.find( ".drop-image" ).removeAttr("src").attr("src",imgPath);
}
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
将revert属性设置为true将使它们始终还原.
$( "#draggable" ).draggable({
revert: true
});
$( "#draggable1" ).draggable({
revert: true
});
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
//ommited for brevity
}
});
Run Code Online (Sandbox Code Playgroud)
工作示例: http ://jsfiddle.net/yLuvv/
| 归档时间: |
|
| 查看次数: |
1782 次 |
| 最近记录: |