jq实现简单的拖拽效果

直接copy下来,应该可以用!

拖拽代码如下:

$(".obj_drag").on({
    mousedown: function(e){
                var el=$(this);
                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
            },
   mouseup: function(e){ $(document).off('mousemove.drag'); }
关于e.pageX,e.pageY及offset().top这些的介绍随后看情况。william will i am
以下是使用jQuery实现简单的拼图效果的示例代码: HTML代码: ```html <div id="puzzle"> <div class="piece" id="piece1"></div> <div class="piece" id="piece2"></div> <div class="piece" id="piece3"></div> <div class="piece" id="piece4"></div> <div class="piece" id="piece5"></div> <div class="piece" id="piece6"></div> <div class="piece" id="piece7"></div> <div class="piece" id="piece8"></div> <div class="piece" id="piece9"></div> </div> ``` CSS代码: ```css #puzzle { width: 300px; height: 300px; border: 1px solid #000; position: relative; } .piece { width: 100px; height: 100px; border: 1px solid #000; background-image: url('path/to/image.jpg'); background-size: 300px 300px; position: absolute; } #piece1 { top: 0; left: 0; } #piece2 { top: 0; left: 100px; } #piece3 { top: 0; left: 200px; } #piece4 { top: 100px; left: 0; } #piece5 { top: 100px; left: 100px; } #piece6 { top: 100px; left: 200px; } #piece7 { top: 200px; left: 0; } #piece8 { top: 200px; left: 100px; } #piece9 { top: 200px; left: 200px; } ``` jQuery代码: ```javascript $(document).ready(function() { var emptyPiece = $('#piece9'); // 空白拼图块 var pieces = $('.piece'); // 所有的拼图块 // 随机打乱拼图块的位置 pieces.sort(function() { return Math.random() - 0.5; }); // 设置每个拼图块的位置 pieces.each(function(index) { var piece = $(this); var top = Math.floor(index / 3) * 100; var left = (index % 3) * 100; piece.css({ top: top + 'px', left: left + 'px' }); // 点击拼图块时进行交换 piece.click(function() { var currentTop = parseInt(piece.css('top')); var currentLeft = parseInt(piece.css('left')); // 判断是否与空白拼图块相邻 if ((currentTop === emptyPiece.position().top && Math.abs(currentLeft - emptyPiece.position().left) === 100) || (currentLeft === emptyPiece.position().left && Math.abs(currentTop - emptyPiece.position().top) === 100)) { var tempTop = piece.css('top'); var tempLeft = piece.css('left'); piece.css({ top: emptyPiece.css('top'), left: emptyPiece.css('left') }); emptyPiece.css({ top: tempTop, left: tempLeft }); } }); }); }); ``` 在上面的示例代码中,我们首先定义了一个包含9个拼图块的容器,并使用CSS设置了每个拼图块的位置。然后在jQuery代码中,我们将所有的拼图块随机打乱位置,并为每个拼图块绑定了一个点击事件,在点击拼图块时进行交换。交换拼图块时,我们使用了jQuery的css()方法来修改每个拼图块的位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天崩地裂金刚不坏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值