使用jQuery和ajax实现拖放功能

Question

我想制作像这个链接中的拖放效果：link，请问我可以从哪里得到相同的效果？

- user1145264

Answer 1

请查看此链接：

Jquery下载和教程

当您下载完成后，可以查看有关拖放的示例。 只需阅读并在项目中使用它，这是学习的最佳方式。
您还可以在那里看到一些在线示例和特定的教程：

Jquery可拖动示例

Jquery可放置示例

Jquery拖放教程

我认为您可以毫无问题地使用它。

- ChapMic

Answer 2

我之前在一个项目中使用过，取得了一些成功：

http://jqueryui.com/demos/draggable/

我遇到的唯一问题是确保在直接添加拖拽效果之前加载了图像，在不同的浏览器中这有点棘手，但我认为如果您将拖拽放在一个 div 上并放置背景图片，您可以避免这个问题。

- John

Answer 3

Use jquery-ui:-

$( function() {
            $( "#elements .element" ).draggable({
                revert: "invalid",
                containment: "document",
                helper: "clone",
                cursor: "move"
            });
            $( ".droppable" ).droppable({
                accept: "#elements .element",
                revert: true,
                greedy: true,
                tolerance: "pointer",
                drop:function (event,ui) {
                    var section=$(this).attr('id');
                    //console.log($(ui.draggable).attr('id'));
                    var id=$(ui.draggable).attr('id');
                    var value=$(ui.draggable).attr('value');
                    $.ajax({
                        url: '{{url("drag")}}/'+id+'/'+value+'/'+section,
                        //data: data,
                        processing: true,
                        //dataType: dataType
                        success:function( data ) {
                            jQuery("#"+section).html(data).fadeIn(1000);
                            //jQuery('#slider-dropable').find('[data-ride=carousel]').carousel();
                            jQuery(".edit_button").bind("trigger");
                        }
                    });
                    //$(ui.draggable).appendTo(this);
                    //$(this).html($(ui.draggable).attr('class')).fadeIn();
                }
            });
        });
    

<ul id="elements">
                                        <li class="element ui-draggable ui-draggable-handle" id="1" value="logo"><a href="#">Logo</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="2" value="top-meta"><a href="#">Top Meta</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="3" value="pages"><a href="#">Navigation</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="4" value="slider"><a href="#">Slider</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="5" value="content"><a href="#">Content</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="6" value="hours"><a href="#">Hours</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="7" value="location"><a href="#">Location</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="8" value="contact_form"><a href="#">Contact Form</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="9" value="foot"><a href="#">Footer</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="10" value="newsletter_form"><a href="#">Newsletter Form</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="11" value="reservation_form"><a href="#">Reservation Form</a></li>
                            <li class="element ui-draggable ui-draggable-handle" id="12" value="gallery"><a href="#">Gallery</a></li>
</ul>

<div class="content droppable" id="content_gallery">
                                                    <section id="content" class="editable">
  <div class="row">
    <div class="box">
      <div class="col-lg-12 page_content">
         <p style="text-align:center"><span style="color:#000000"><span style="font-size:14px"><span style="font-family:Comic Sans MS,cursive"><strong>This is gallery section</strong></span></span></span></p>
       </div>
    </div>
  </div>

    <a href="#" class="btn btn-info btn-lg edit_button" data-endpoint="http://freshdelight.webtart.com/editContent/8" data-target="popup_edit" data-cache="false" data-async="true"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
</section>                            </div>

- Vinod saraswat

---

请详细阐述您的答案，因为目前解决方案并不清晰。此外，我会改善格式。 - frhd