代码：拖拽

Posted 2020-07-13 21270

拖拽

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    //拖拽的实现
    var startDrag = {
        moveFlag:false,//拖动时为true
        Rx:0,
        Ry:0,
        init:function(target,bar){
            target.mousedown(function(event) {
                startDrag.Rx = event.pageX - (parseInt(target.css("left")) || 0);
                startDrag.Ry = event.pageY - (parseInt(target.css("top")) || 0);
                target.css("position", "absolute").css(‘cursor‘, ‘move‘);
                startDrag.moveFlag = true;
            }).mouseup(function() {
                startDrag.moveFlag = false;
                target.css(‘cursor‘, ‘auto‘);
            });
            $(document).mousemove(function(event) {
                if (startDrag.moveFlag) {
                    target.css({
                        top: event.pageY - startDrag.Ry,
                        left: event.pageX - startDrag.Rx
                    });
                }
            });
        }
    }
    startDrag.init($(‘.abs-banner‘), $(‘.min-banner-head‘));
});
</script>
<style type="text/css">
.abs-banner{position:absolute;left:100px;top:100px;padding:0;background:#f0f3f9;font-size:12px;box-shadow:2px 2px 4px #666666;}
.min-banner-head{line-height:24px;background:#beceeb;border-bottom:1px solid #a0b3d6;padding-left:5px;cursor:move;}
.min-banner-body{width:420px;height:250px;padding:10px 5px;}
</style>
<h1>拖拽</h1>
<div class="abs-banner">
    <div class="min-banner-head">拖拽</div>
      <div class="min-banner-body">内容……</div>
</div>

 

 

 

 

...