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的子部分

回答

相關問題