ドラッグ可能なウィジェットをHTML形式で描画するにはどうすればよいですか？

Question

自由に浮動するHTML divが必要です。他の要素と無関係にどこにでもドラッグして配置できます。要素が下の要素のビューをブロックすることがありますが、問題はありません。能力を最小化することもいいでしょう。これのためのライブラリはありますか？

Google検索の結果は、ある位置からドラッグして別の位置にドラッグできるアイテムになります。フリーフローティングライブラリが見つかりませんでした。

Answer 1

いいディレクティブを使用できます。 そのGitHubリンクは... angular-dragdropです。

HTML DOM：：

<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div> 
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:50px;'> 
    <div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}</div> 
</div> 

JS：

App.controller('OverviewCtrl', function($scope) { 
    $scope.list1 = {title: 'AngularJS - Drag Me'}; 
    $scope.list2 = {}; 
}); 

Answer 2

あなたがdraggable属性とでいくつかのロジックを使用する必要が デモはhere

サンプルコードを見つけることができますjavascript .. （私はjsファイルを使用しているので、これはあなたの答えではありませんかもしれangularjsない） コードはjQueryのは、単純なdraggableオプションを持って、それを見てみましょう

function drag_start(event) { 
 
    var style = window.getComputedStyle(event.target, null); 
 
    event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY) + ',' + event.target.getAttribute('data-item')); 
 
} 
 

 
function drag_over(event) { 
 
    event.preventDefault(); 
 
    return false; 
 
} 
 

 
function drop(event) { 
 
    var offset = event.dataTransfer.getData("text/plain").split(','); 
 
    var dm = document.getElementsByClassName('dragme'); 
 
    dm[parseInt(offset[2])].style.left = (event.clientX + parseInt(offset[0], 10)) + 'px'; 
 
    dm[parseInt(offset[2])].style.top = (event.clientY + parseInt(offset[1], 10)) + 'px'; 
 
    event.preventDefault(); 
 
    return false; 
 
} 
 

 
var dm = document.getElementsByClassName('dragme'); 
 
for (var i = 0; i < dm.length; i++) { 
 
    dm[i].addEventListener('dragstart', drag_start, false); 
 
    document.body.addEventListener('dragover', drag_over, false); 
 
    document.body.addEventListener('drop', drop, false); 
 
}

div { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    /* set these so Chrome doesn't return 'auto' from getComputedStyle */ 
 
    width: 200px; 
 
    background: rgba(255, 255, 255, 1); 
 
    border: 2px solid rgba(0, 0, 0, 1); 
 
    border-radius: 4px; 
 
    padding: 8px; 
 
} 
 

 
body, 
 
html { 
 
    min-height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div draggable="true" class="dragme" data-item="0">Drag me</div>

Answer 3

のようになります。また https://jqueryui.com/draggable/#default

divの自由浮動を持っているだけで、それを設定します。

position: absolute;