我想制作像这个链接中的拖放效果:link,请问我可以从哪里得到相同的效果?
请查看此链接:
Jquery下载和教程
当您下载完成后,可以查看有关拖放的示例。
只需阅读并在项目中使用它,这是学习的最佳方式。
您还可以在那里看到一些在线示例和特定的教程:
Jquery可拖动示例
Jquery可放置示例
Jquery拖放教程
我认为您可以毫无问题地使用它。
我之前在一个项目中使用过,取得了一些成功:
http://jqueryui.com/demos/draggable/
我遇到的唯一问题是确保在直接添加拖拽效果之前加载了图像,在不同的浏览器中这有点棘手,但我认为如果您将拖拽放在一个 div 上并放置背景图片,您可以避免这个问题。
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>