拖放使用jQuery和Ajax

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