CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
Tirkesh Turkesh
Tirkesh Turkesh

Reputation: 231

Not able to dragged elemenet in droppable div after drop function in jquery ui

I am working on drag and drop functionality, i have images, and i am doing drag and drop and making clone of it, I am able to drop that image, but not able to dragged to change its position after dropped element, here i have added all my code, can anyone please help me how can i resolve this issue ?

            $(".draggable").draggable({helper:'clone'});  
           
            $(".droppable").droppable({
                accept: ".draggable",
                drop: function (event, ui) {
                    
                    $(".center-div").append($(ui.draggable).clone());
                    
                }
            });
  
.center-div {
    width: 80%;
    height: 80%;		
    background: grey;
    position: absolute;
    top:100px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.line{
    height: 47px;
    border-bottom: 1px solid black;
    position: absolute;
}
.line-complete:hover {
    //border: 1px solid white !important;
    //background: white !important;
    //padding: 0px;
    //font-size: 1.2em;
    cursor: pointer;
}
.line-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 50px;
    color: #fff;
    line-height: 5px;
    text-align: center;
    background: red;
    margin-left: -3px !important;
    margin-top: -5px !important;
    z-index: 9999;
}


.draggable { width: 70px; height: 70px; padding: 0.5em; float: left; margin: 10px 10px 10px; z-index: 999999; }
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
  
  
  <div class="container">
	    	
	    <div class="row">
		<div class="col-md-12">
		    <div id="floorplan_images">
          <img class="draggable" src="http://hfpbuilder-dev.serverdatahost.com/images/vessel_drum.png" style="z-index:9999" width="50" height="50">
        </div>	
		</div>    
	    </div>
	    
	</div>
	<div class="center-div ui-widget-header droppable"></div>

Upvotes: 1

Views: 44

Answers (1)

Ali Soltani
Ali Soltani

Reputation: 9927

You can change drop method like this:

$(".droppable").droppable({
  accept: ".draggable",
  drop: function(event, ui) {
    var draggedElement = $(ui.draggable).clone();
    draggedElement.removeClass('draggable');
    $(".center-div").append(draggedElement);
    draggedElement.draggable();
  }
});

Online Demo (jsFiddle)

Upvotes: 1

Related Questions