大佬教程收集整理的这篇文章主要介绍了使用jquery droppable,我怎样才能复制trello将人们的图像丢到卡片右下角卡片上的行为?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我在同一张卡上拖动另一个人的图片,它会捕捉到最后一张图片的左侧,等等.这部分是jquery UI的内置API可放置还是这个自定义代码来获取此行为?
这是我目前的代码:
<script type="text/javascript"> $(function () { $(".draggable").draggable({ revert: "invalid",snap: "true",snapMode: "inner" }); $(".droppable").droppable({ }); }); </script>
HTML
<div id="test"> <div class="draggable">1</div> <div class="draggable">2</div> <div class="draggable">3</div> <br> <br> <div class="droppable"> <div class="bottom"> </div> </div> </div>
CSS
.draggable { display:inline-block; border:1px solid blue; height: 22px; width: 25px; margin-right: 1px; text-align: center; vertical-align: center; } .droppable { position: absolute; border:1px solid black; height:100px; width:200px; display:inline-block; margin-left:50px; text-align: right; } .bottom { position: absolute; bottom: 0; height:25px; width:200px; }
jQuery的
$(".draggable").draggable({ revert: "invalid",snapMode: "inner" }); $(".droppable").droppable({ drop: function( event,ui ) { ui.Helper.css('top',''); ui.Helper.css('left',''); $(this).find('.bottom').prepend(ui.Helper); } });
另一个例子
以上是大佬教程为你收集整理的使用jquery droppable,我怎样才能复制trello将人们的图像丢到卡片右下角卡片上的行为?全部内容,希望文章能够帮你解决使用jquery droppable,我怎样才能复制trello将人们的图像丢到卡片右下角卡片上的行为?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。