interact.js 可拖拉和大小调整的界面元素

drag to draw a html element with interact.js, drag drop and resize

js, editor, wysiwyg

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1630
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// target elements with the "draggable" class
interact('.draggable')
    .draggable({
        // enable inertial throwing
        inertia: true,
        // keep the element within the area of it's parent
        modifiers: [
            interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,

listeners: {
            // call this function on every dragmove event
            move: dragMoveListener,

// call this function on every dragend event
            end(event) {
                var textEl = event.target.querySelector('p')

textEl && (textEl.textContent =
                    'moved a distance of ' +
                    (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
                        Math.pow(event.pageY - event.y0, 2) | 0))
                    .toFixed(2) + 'px')
            }
        }
    })

function dragMoveListener(event) {
    var target = event.target
        // keep the dragged position in the data-x/data-y attributes
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

// translate the element
    target.style.webkitTransform =
        target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)'

// update the posiion attributes
    target.setAttribute('data-x', x)
    target.setAttribute('data-y', y)
}

// this function is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener

编译

CSS

HTML

drag to draw a html element with interact.js, drag drop and resize

js, editor, wysiwyg

编辑器支持Emmet

快捷键

drag to draw a html element with interact.js, drag drop and resize

js, editor, wysiwyg

React.js 可拖放文件的上传表单（支持多文件和进度显示）

React.js 可调节最长信息输入字符数的TWEET表单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：