interact实现任意div拖放和缩放
代码语言:html
所属分类:拖放
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(["interact.min"], function() { interact('.resize-drag') .draggable({ onmove: window.dragMoveListener, modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent' }) ] }) .resizable({ // resize from all edges and corners edges: { left: true, right: true, bottom: true, top: true }, modifiers: [ // keep the edges inside the parent interact.modifiers.restrictEdges({ outer: 'parent', endOnly: true }), // minimum size interact.modifiers.restrictSize({ min: { width: 100, height: 50 } }) ], inertia: true }) .on('resizemove', function (event) { var target = event.target var x = (parseFloat(target.getAttribute('data-x')) || 0) var y = (parseFloat(target.getAttribute('data-y')) || 0) // update the element's style target.style.width = event.rect.width + 'px' target.style.height = event.rect.height + 'px' // translate when resizing from top or left edge.........完整代码请登录后点击上方下载按钮下载查看
网友评论0