• 228浏览
  • 0 评论
  • 0收藏

拖拽元素后追加的HTML怎么执行拖拽方法

javascript eddie 2018-07-05 13:54的提问
0
<html> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <meta name="format-detection" content="telephone=no" /> <title>图标</title> <link href="css/common.css" rel="stylesheet" type="text/css"> <style> .modal { position: absolute; top: 100px; left: 100px; width: 300px; border: 1px solid #aaa; padding: 3px; border-radius: 5px; } .modal-header { height: 24px; line-height: 24px; background-color: #ddd; color: #222; padding: 5px; border-radius: 3px; } .modal-body { height: 100px; } .btn-close { width: 24px; height: 24px; float: right; padding: 3px; } </style> [removed][removed] [removed] $(function() { /* [draggable 拖拽方法] @param {[type]} modal [移动元素] @param {[type]} handle [拖拽元素] @param {[type]} cancle [排除元素] / var draggable = function(modal, handle, cancle) { var isDragging = false; var startX = 0, startY = 0, left = 0, top = 0; var dragStart = function(e) { var e = e || window.event; e.preventDefault(); // 获取需要排除的元素 isDragging = true; startX = e.clientX; startY = e.clientY; left = $(modal).offset().left; top = $(modal).offset().top; } var dragMove = function(e) { var e = e || window.event; e.preventDefault(); if (isDragging) { var endX = e.clientX, endY = e.clientY, relativeX = endX - startX, relativeY = endY - startY; $(modal).css({ left: relativeX + left + 'px', top: relativeY + top + 'px' }); } return false; } var dragEnd = function(e) { addHtml(); isDragging = false; } $(handle).on('mousedown', dragStart); $(document).on('mousemove', dragMove); $(document).on('mouseup', dragEnd); } function addHtml() { $("body").append('') } $(".modal").each(function() { var that = $(this) draggable(that, that); }) }) [removed] </head> <body> </body> </html>
2018-07-05 13:54的提问 邀请回答
0个回答
  • 默认排序
  • 时间排序

    您需要 注册 一个IMWeb账号或者 才能进行评论。