點擊拖放功能

我正在創建一個非常簡單的拖放應用程序。點擊拖放功能

使用html5的拖放功能在桌面上完美工作。

我想通過單擊（選擇）並單擊（目標，放下）來複制拖放的功能。

我想要發生的事情。

您點擊要移動的元素（即在移動狀態下鼠標或手指）

您選擇存儲在DOM和元素然後在下點擊（在目標區域）元素被追加。

這是可以實現的嗎？

由於

來源

2017-05-15 Elliott James

<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Document</title> 
<style> 

    .clickableBtn { 
    border: 1px solid green; 
    background-color: #bed1a3; 
    display: inline-block; 
    padding: 10px 15px; 
    margin: 20px; 
} 
.clickableBtn:hover { 
    cursor: pointer; 
} 

.selected { 
    opacity: .3; 
} 
.targetArea { 
    border: 1px solid red; 
    background: orange; 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    left: 50%; 
    top: 20px; 
} 
.targetArea:hover { 
    cursor: pointer; 
} 
</style> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
</head> 
<body> 

    <div class="clickableBtn">Click me!!</div> 

    <div class="targetArea"></div> 

    <script> 
    $(function(){ 

     $('.clickableBtn').on('click',function(e){ 
     e.preventDefault(); 
     if ($(this).parent().prop('class') != 'targetArea'){ 
      $(this).toggleClass('selected'); 
     } 
     }); 
     $('.targetArea').on('click',function(e){ 
     e.preventDefault(); 
     if($('.selected').lenght !== 0) { 
      $(this).append($('.selected')); 
      $('.selected').removeClass('selected'); 
     } 
     }); 
    }); 
    </script> 

</body> 
</html>

來源

2017-05-15 11:36:41 benson

下面的例子是一個簡單的拖放例如：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Sortable - Connect lists</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #sortable1, #sortable2 { 
    border: 1px solid #eee; 
    width: 142px; 
    min-height: 20px; 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0 0 0; 
    float: left; 
    margin-right: 10px; 
    } 
    #sortable1 li, #sortable2 li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
    } 
    </style> 
    <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> 
    <script> 
    $(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
    }); 
    </script> 
</head> 
<body> 

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight">Item 1</li> 
    <li class="ui-state-highlight">Item 2</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
</ul> 


</body> 
</html>

Refrence Link

來源

2017-05-15 10:38:51

感謝您的回答，但這只是拖放功能。我更新了我的問題，讓我的問題更清楚。謝謝。 –

已答覆更新 –

我將由存儲參考實現這在變量「點擊」的項目（列表，對象，無論適合你）在你點擊它們之後。當你點擊「拖放」區域時（找出你想要的「拖放區域」是什麼），只需讀取該變量並將所有點擊的項目「移動」（可能用CSS）到「拖放」區域。

來源

2017-05-15 10:48:13 errata

這就是要走的路。謝謝你的幫助！ –

點擊拖放功能

回答

相關問題