Question

我创建了一个表单，其中有一个侧导栏。单击<li>时，将显示其对应的模态。这就是我展示我的侧导栏的方式：

    <div id="sidebar-wrapper">
            <div class="sidebar-nav_wrapper">
                 <h4 class="sidebar-brand">Select Field Type</h4>
              <ul class="sidebar-nav" style="margin-top: 40px;">
                 <li><a href="#" id="SingleLine_LI" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
                 <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>       
            </ul>
            </div>
            <div class="sidebar-nav_wrapper">
              <ul class="sidebar-nav" style="margin-top: 40px; margin-left: -20px;">
                 <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
                 <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
            </div>
        </div>
<!-- /#sidebar-wrapper -->

因此，只要点击<li>，就会打开一个模态。现在，我想使它可拖动和可拖放。这就是我试图做的事情：

<!-- Page Content -->
<div class="div_container"></div>
   <div id="log">
$('li').draggable({
            revert: 'invalid'          
         });

         $('.div_container').droppable({
            accept: 'li',
            tolerance: 'pointer',
            drop: function (event, ui) {
                alert('inside');                
            },
            over: function (event, ui) {
                $('#log').text('over');
            },
            out: function (event, ui) {
                $('#log').text('out');
            }
        });

发生的事情是，我能够拖动<li>元素，但无法将其带到侧导杆之外。它被拖入侧导航器本身，所有<li>元素都消失了。我不知道错误是什么以及如何实现这一点。我应该改变什么？我怎样才能将它带到外面并掉进div里？

使`<li>`元素可拖动并可拖放

0 个答案: