要素が負の位置に配置されているときにページを左にスクロールするにはどうすればよいですか？

マインドマップに似たアプリケーションを作成しようとしていますが、複雑である必要はありません。私が持っている問題は、ページに要素を配置し、ドラッグ可能な関数jQueryでドラッグ可能にすると、要素をドラッグすると要素が右にドラッグされ、ページの幅が大きくなります。 leftは負の値をとり、スクロールバーは負のスペースをカバーしません。要素が負の位置に配置されているときにページを左にスクロールするにはどうすればよいですか？

私はどこでも検索して何も見つかりませんでした。どんな助けもありがとう。

のJavaScriptコード

$(function() { 
    $("#draggable").draggable(); 
});

HTMLマークアップ：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <div id="draggable"> 
    Can be dragged to the right of the screen and the scrollbar increases but 
    not to the left. 
    </div>

JSFiddle Example

出典

2017-11-28 Hamid Hosseini

スクロールバーがページの上部または左側に向けて延長することになっていませんが、あなたは仕事ができますドラッグ可能なアイテムが負の座標にドロップされ、その位置がリセットされている場合は、ページサイズを大きくすることで、javacriptを使用して、たとえば

var increasedLeft = 0; 
 

 
$(function() { 
 
    $("#draggable").draggable({ 
 
    stop: function(event, ui) { 
 
     if (ui.position.left < 0) { 
 
     $("#draggable").css({left: 0}); 
 
     $("#container").width($("#container").width() - ui.position.left); 
 
     increasedLeft -= ui.position.left; 
 
     } else if (increasedLeft > 0) { 
 
     \t $("#container").width($("#container").width() - Math.min(increasedLeft, ui.position.left)); 
 
     $("#draggable").css({left: (ui.position.left - Math.min(increasedLeft, ui.position.left))}); 
 
     \t increasedLeft -= Math.min(increasedLeft, ui.position.left); 
 
     } 
 
    } 
 
    }); 
 
});

html, body, #container { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#draggable { 
 
    background-color: black; 
 
    color: white; 
 
    width: 200px; 
 
    margin: 0; 
 
}

<body> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <div id="container"> 
 
    <div id="draggable"> 
 
     Can be dragged to the right of the screen and the scrollbar increases but not to the left. 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-11-28 14:57:19 Kristaps

これは今のところそれを行う必要があり、ありがとうございます。 –

@HamidHosseini問題ありません！私の答えがあなたの問題を解決した場合は、答えから残ったチェックマークをクリックすることで正解とすることができます。 – Kristaps

要素が負の位置に配置されているときにページを左にスクロールするにはどうすればよいですか？

答えて

関連する問題