javascript drag a div如果你点击这个div的子部分

-3

我正在开发这个javascript应用程序，当你打开那里有几个svg组件，有点击侦听器。这个想法是，他们中的大多数（可能都是）需要同时显示信息，我希望用户选择他可以同时看到的信息，因为当然所有信息都不适合屏幕。所以我的想法是使用一个div，你可以拖动，但也可以与内容交互（并且可以随时打开多个div。）javascript drag a div如果你点击这个div的子部分

我尝试了一些jQuery UI的东西，但似乎并没有做的诀窍，我能找到的最接近的东西是一个弹出框，阻止其余的网站内容。

我决定去为interactjs，基本上只是给我可拖动和可调整大小的div，这太棒了！不幸的是，我无法找到如何使div的某些部分可拖动（如实际拖拽常规操作系统窗口的顶部）以及如何让用户与div窗口内部的内容交互（因为所有内容只是点击拖动区域）我主要使用示例中的代码（粘贴在这里供参考）：

<div class="resize-container"> 
    <div class="resize-drag"> 
    Resize from any edge or corner 
    </div> 
</div>

这里是JS：

interact('.resize-drag') 
    .draggable({ 
    onmove: window.dragMoveListener 
    }) 
    .resizable({ 
    preserveAspectRatio: true, 
    edges: { left: true, right: true, bottom: true, top: true } 
    }) 
    .on('resizemove', function (event) { 
    var target = event.target, 
     x = (parseFloat(target.getAttribute('data-x')) || 0), 
     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 edges 
    x += event.deltaRect.left; 
    y += event.deltaRect.top; 

    target.style.webkitTransform = target.style.transform = 
     'translate(' + x + 'px,' + y + 'px)'; 

    target.setAttribute('data-x', x); 
    target.setAttribute('data-y', y); 
    target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height); 
    });

来源

2016-02-29 Andrés AG

我想我想通了一个非常简单的方法。我的问题是这样的：如何使div的部分可拖动？通常当你做这样的事情：

<div id="draggable" class="ui-widget-content"> 
    <div> I want to be dragged if this is clicked </div> 
    <div> I do not want to be dragged if this is clicked</div> 
</div>

整个#draggable格设置为可拖动的，所以你不能真正与div的内容进行互动。然而，与jQuery我做了以下内容：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Draggable - Default functionality</title> 
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <style> 
     #draggable { width: 150px; height: 150px; padding: 0.5em; } 
     </style> 
     <script> 
     $(function() { 
      $("#draggable").draggable(); 
     }); 
     </script> 
    </head> 
    <body> 
     <div id="draggable" class="ui-widget-content"> 
      <div style="border: 4px solid black" onmouseover="$('#draggable').draggable('enable');" onmouseout="$('#draggable').draggable('disable');"> 
       click here to drag this thing 
      </div> 
      <p>Do not want to drag if click here</p> 
     </div> 
    </body> 
</html>

当你的鼠标在上面div的，可拖动已启用，您可以移动的股利。否则就像任何其他与内容的div。

来源

2016-02-29 21:18:14

javascript drag a div如果你点击这个div的子部分

回答

相关问题