如果单击此div的一个子部分，则javascript会拖动一个div_Javascript_Jquery_Html_Css_Interact.js

如果单击此div的一个子部分，则javascript会拖动一个div

javascript jquery html css

如果单击此div的一个子部分，则javascript会拖动一个div,javascript,jquery,html,css,interact.js,Javascript,Jquery,Html,Css,Interact.js,我正在开发这个javascript应用程序，当您打开几个svg组件时，这些组件具有click侦听器。这个想法是，它们中的大多数（可能全部）将需要同时显示信息，我希望用户选择他可以同时看到的信息，因为肯定所有信息都不适合屏幕。所以我的想法是使用一个div，您可以拖动它，但也可以与内容交互（并且可以随时打开多个div）我尝试过一些jQuery UI的东西，但这似乎不起作用，我能找到的最接近的东西是一个弹出窗口，它阻止了网站的其余内容我决定选择InteracticJS，它基本上只提供可拖动和可调整

我正在开发这个javascript应用程序，当您打开几个svg组件时，这些组件具有click侦听器。这个想法是，它们中的大多数（可能全部）将需要同时显示信息，我希望用户选择他可以同时看到的信息，因为肯定所有信息都不适合屏幕。所以我的想法是使用一个div，您可以拖动它，但也可以与内容交互（并且可以随时打开多个div）

我尝试过一些jQuery UI的东西，但这似乎不起作用，我能找到的最接近的东西是一个弹出窗口，它阻止了网站的其余内容

我决定选择InteracticJS，它基本上只提供可拖动和可调整大小的div，这太棒了！不幸的是，我找不到如何使div的某些部分可拖动（比如在常规操作系统中实际拖动窗口的窗口顶部）以及如何允许用户与div窗口内的内容进行交互（因为所有内容都只是点击拖动区域）。我主要使用示例中的代码（粘贴此处以供参考）：

我想我用一种非常简单的方法解决了这个问题。我的问题是：如何只让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>

当您的鼠标位于顶部div上时，将启用draggable，您可以移动div。否则，与任何其他具有内容的div一样

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);
  });

<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>

<!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>