Question

在我的html代码中，我的代码结构是

<form name="mainform" class="mainclass">
    <div id="dv1">
        <ul>
            <li>some content and form elements here</li>
        </ul>
    </div>
    <div id="dv2">
         <ul>
             <li>some content and form elements here</li>
        </ul>
    </div>
    <div id="dv3">
        <ul>
            <li>some content and form elements here</li>
        </ul>
    </div>
    <!---- Div need to drag--->
    <div id="lunch">
        <ul>
            <li>some content and form elements here</li>
        </ul>
    </div>
</form>

我需要拖动此#lunch div，并且需要介于#dv1 or #dv2, or #dv3之间。主要的div (#dv1,2,3)无需拖动。

我使用了以下jquery代码

$(function() {
    $(".mainclass div").sortable({ 
        opacity: 0.8, 
        cursor: 'move', 
        update: function() {}
    });
});

但这不是拖累。

如果我使用以下代码 - ＆gt; div中的元素是可拖动的，不能掉落。

$(function() {
    $("#ln_brk").sortable({ 
        opacity: 0.8, 
        cursor: 'move', 
        update: function() {}
    });
});

我做错了什么？以及如何实现这一目标？请帮我。

Answer 1

您在代码中使用了太多括号：

$(function() {
   $(".mainclass div").sortable({ 
       opacity: 0.8,  
       cursor: 'move',
       update: function() {}
   });
});

});

删除上面代码段的最后一行。

Answer 2

您可以使用html拖放。

<form name="mainform" class="mainclass">
      <div id="dv1" ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
        <ul>
          <li>some content and form elements here</li>
        </ul>
      </div>
       <div id="dv2" ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
        <ul>
          <li>some content and form elements here</li>
        </ul>
      </div>
      <div id="dv3" ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
        <ul>
          <li>some content and form elements here</li>
        </ul>
      </div>
      <div id="lunch" draggable="true" ondragstart="return dragStart(event)">
        <ul>
          <li>some content and form elements here</li>
        </ul>
      </div>
    </form>

小提琴：http://plnkr.co/edit/3OMfqActNAm0eccllte4?p=preview

使用div拖动的Jquery拖放问题

2 个答案: