CODEWITHSUNDEEP
jquery
user1145264
user1145264

Reputation: 35

Drag and Drop using jQuery and ajax

i want to make drag and drop effect like this "link" any body can tell from where can i got this same effect

Upvotes: 3

Views: 18998

Answers (3)

Vinod saraswat
Vinod saraswat

Reputation: 25

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>

Upvotes: 0

John
John

Reputation: 3546

I have had some success using on a project before :

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

only issues that I have had is to make sure an image is loaded before adding the drag effect directly on a image and this was little bit tricky in different browsers but I think if you put the drag on a say div and put a background image maby you can avoid that issue.

Upvotes: 0

ChapMic
ChapMic

Reputation: 28114

Go check this link :

Jquery Download and Tutorial

When you have downloaded this, you can check samples about drag and drops. Just read it and use it in your project, it is the best way to learn it.
You can also see some online example there and a specific tutorial:

Jquery Example Draggable

Jquery Example Droppable

Tutorial Drag and Drop Jquery

I think you can use it without any problem with that.

Upvotes: 1

Related Questions