Question

我正在创建一个非常简单的拖放应用程序。

使用html5的拖放功能在桌面上完美运行。

我想使用点击（选择）复制拖放功能，然后点击（目标，放弃）。

我想要发生什么。

单击要移动的元素（即在移动情况下使用鼠标或手指）

您选择的元素存储在dom中，然后在下一次单击（在目标区域中）附加元素。

这是可以实现的吗？

由于

Answer 1

<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>

Answer 2

我会通过将引用存储到＆＃34;点击＆＃34;来实现这一点。单击它们后，变量中的项目（列表，对象，适合您的任何内容）。当你点击＆＃34; drop＆＃34;区域（找出＆＃34;下降区域＆＃34;以任何你想要的方式）只需读取该变量并且＆＃34;移动＆＃34; （可能是用CSS）所有点击的项目都是＆＃34; drop＆＃34;区域。

Answer 3

以下示例是一个简单的拖放示例：

<!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

点击即可拖放功能

3 个答案: