Question

我想制作像这样的“link”拖放效果，任何身体都可以告诉我从哪里可以获得同样的效果

Answer 1

请检查此链接：

Jquery Download and Tutorial

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

Jquery Example Draggable

Jquery Example Droppable

Tutorial Drag and Drop Jquery

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

Answer 2

我之前在项目上取得了一些成功：

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

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

Answer 3

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

使用jQuery和ajax拖放

3 个答案: