8

親要素全体のどこにもドラッグしてドラッグを制御することなく、要素全体を移動できるナビゲーションバーのようなものを作りたいと思います。例えば：

<div class="undraggable">
    <div class="draggable"></div>
    content
</div>

タイトルバーをドラッグすると、ウィンドウが含まれているウィンドウ全体がドラッグされますが、ウィンドウコンテナの他の場所にドラッグしても、ウィンドウはドラッグされません。

dragresizeを使用しようとしましたが、彼のコードでドラッグ可能な（サイズ変更可能ではない）オブジェクトのみを作成することはできません。

4

4 に答える 4

8

私はこのようなものを探していましたが、jquery uiでは、プロジェクトですでに使用しているため、すでにJQUERY UIを使用している場合は、ドラッグするハンドルを識別できます。これが実際の例です：http：//jsfiddle.net/VPMFs/

<style>
.undraggable{height:500px;width:500px;background:blue;}
.draggable{height:100px;width:100px;background:white;}
</style>
<div class="undraggable">
<div class="draggable">drag me!</div>
</div>

<script>
$('.undraggable').draggable({handle: '.draggable'});
</script>
于 2013-07-04T11:38:29.640 に答える
5
  1. マウスダウンハンドラーをドラッグコントローラー（ウィンドウのタイトルバーなど）に登録します。
  2. ドラッグしているときに、別の要素（ウィンドウラッパーなど）の位置を更新します。

ここにこの例があります：http：
//phrogz.net/js/PhrogzWerkz/WerkWin.html

jQuery UIライブラリなどの特定のライブラリでこれを機能させる必要がある場合は、質問を編集して言うようにしてください。

より簡単なデモ：http：//jsfiddle.net/VCQuN/1/

<div class="window">
  <div class="titlebar">Hello, World!</div>
  <div class="content">
    <p>Window <b>Content!</b></p>
  </div>
</div>​

// For each item with a `window` class…
var windows = document.querySelectorAll('.window');
[].forEach.call(windows,function(win){

  // …find the title bar inside it and do something onmousedown
  var title = win.querySelector('.titlebar');
  title.addEventListener('mousedown',function(evt){

    // Record where the window started
    var real = window.getComputedStyle(win),
        winX = parseFloat(real.left),
        winY = parseFloat(real.top);

    // Record where the mouse started
    var mX = evt.clientX,
        mY = evt.clientY;

    // When moving anywhere on the page, drag the window
    // …until the mouse button comes up
    document.body.addEventListener('mousemove',drag,false);
    document.body.addEventListener('mouseup',function(){
      document.body.removeEventListener('mousemove',drag,false);
    },false);

    // Every time the mouse moves, we do the following 
    function drag(evt){
      // Add difference between where the mouse is now
      // versus where it was last to the original positions
      win.style.left = winX + evt.clientX-mX + 'px';
      win.style.top  = winY + evt.clientY-mY + 'px';
    };
  },false);
});
​
于 2012-05-21T19:24:39.723 に答える
2

親要素にdraggable="true"という属性を持ち、すべての子要素にdraggable="false"という属性を持ちます。これで、子要素または親要素のいずれかをドラッグすると、ドラッグが正しく機能します。画像タグにdraggable="false"を追加しないと、ドラッグアンドドロップ機能が正しく機能しません。 ネストされた要素でドラッグアンドドロップ

<span className="dragelement cp"  draggable={true} 
onDragStart={(event)=>drag(event)} onDragEnd={(event)=>dragEnd(event)} 
id= {'drag'+el.type+index+idx}>
    <div>{m.a}</div>  
    {m.img && <img draggable={false} src={m.img} height="70px" width="100px" />  } 
</span>
于 2021-07-17T19:51:07.253 に答える
0

jQueryUIのドラッグ可能な機能を使用します。

http://jqueryui.com/demos/draggable/

jQuery UIのカスタムダウンロードを作成して、必要なコンポーネント（ドラッグ可能でその依存関係）のみを取得できます：http：//jqueryui.com/download。

構成オプションがたくさんあります-あなたの言い回しは少し曖昧ですが、ハンドルオプションが必要かもしれないと思います：http：//jqueryui.com/demos/draggable/#handle

于 2012-05-21T19:27:36.600 に答える