1

I have very simple jquery ui code to drag and drop elements. However, I had a problem, that I can't sort dropped element on drop !!

I used jquery sortable functionalty but I never know where is the problem !!

I have full code example here. And if I could explain it in other way, I need to drag and drop section 1 then section 2 and finally sort section 3 between section 1 and 2 while dropping it. would you please help me ?

$(function() {
  $("#side").resizable({
    handles: 'e'
  });

  $("#editor").sortable().disableSelection()
    .droppable({
      drop: function(event, ui) {
        $(this)
          .append('<div contenteditable="true" ' +
            'class="alert alert-danger">' +
            $(ui.draggable).html() + '</div>')
          .animate({
            width: "250px"
          }, 700);
      }
    });

  $(".item")
    .mousedown(function() {
      $(this).css('cursor', 'grabbing');
    })
    .draggable({
      helper: "clone"
    });
});
#container {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#editor {
  flex: 1;
  margin: 0 auto;
  height: 100vh;
  background-color: DodgerBlue;
  text-align: right;
  padding: 20px;
}

#side {
  min-width: 130px;
  max-width: 260px;
  height: 100vh;
  background: #708090;
  border: 1px solid #696969;
  color: yellow;
}

.item {
  border: 1px solid #DCDCDC;
  border-radius: .4em;
  background-color: white;
  color: #000;
  padding: 12px;
  margin: 10px;
  display: inline-block;
}

.item:hover {
  cursor: grab;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>



<div id="container">

  <div id="side">
    <h3 id="title" class="ml-2 mt-2">I'm resizable</h3>
    <i class="fa fa-align-center item"> Section 1</i>
    <i class="fa fa-align-center item"> Section 2</i>
    <i class="fa fa-align-center item"> Section 3</i>
    <i class="fa fa-align-center item"> Section 4</i>
    <i class="fa fa-align-center item"> Section 5</i>
    <i class="fa fa-align-center item"> Section 6</i>

  </div>

  <div id="editor" contenteditable="true">
    <h3 id="title">I'm editable</h3>
    <p></p>
  </div>

</div>

Improve this question
2
  • Seems like you already implemented the option to sort in the "I'm editable" section. Are you asking about the problem that east drop not only order the element but also copy it? Commented Jul 14, 2020 at 10:31
  • @MoshFeu Yes, I can't drop any element where I want. and it always sort to the last position in the list. Moreover, when I try to sort elements I get unwanted clones !! Commented Jul 15, 2020 at 9:49

1 Answer 1

Reset to default
1

In order to avoid the duplication, you can add the accept: '.item' option to the .droppable options. This way, only .item element can be dropped so the drop callback will be fired only for element which dragged from the side bar.

Regarding the drag + sort in the same without dropping, I'm not sure it is possible. I believe that the sort mechanizm is working only for items that already in in the container, but you you drag an element it's not in the container yet.

$(function() {
  $("#side").resizable({
    handles: 'e'
  });

  $("#editor").sortable().disableSelection()
    .droppable({
      accept: '.item',
      drop: function(event, ui) {
        $(this)
          .append('<div contenteditable="true" ' +
            'class="alert alert-danger">' +
            $(ui.draggable).html() + '</div>')
          .animate({
            width: "250px"
          }, 700);
      }
    });

  $(".item")
    .mousedown(function() {
      $(this).css('cursor', 'grabbing');
    })
    .draggable({
      helper: "clone"
    });
});
#container {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#editor {
  flex: 1;
  margin: 0 auto;
  height: 100vh;
  background-color: DodgerBlue;
  text-align: right;
  padding: 20px;
}

#side {
  min-width: 130px;
  max-width: 260px;
  height: 100vh;
  background: #708090;
  border: 1px solid #696969;
  color: yellow;
}

.item {
  border: 1px solid #DCDCDC;
  border-radius: .4em;
  background-color: white;
  color: #000;
  padding: 12px;
  margin: 10px;
  display: inline-block;
}

.item:hover {
  cursor: grab;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>

<div id="container">
  <div id="side">
    <h3 id="title" class="ml-2 mt-2">I'm resizable</h3>
    <i class="fa fa-align-center item"> Section 1</i>
    <i class="fa fa-align-center item"> Section 2</i>
    <i class="fa fa-align-center item"> Section 3</i>
    <i class="fa fa-align-center item"> Section 4</i>
    <i class="fa fa-align-center item"> Section 5</i>
    <i class="fa fa-align-center item"> Section 6</i>
  </div>
  <div id="editor" contenteditable="true">
    <h3 id="title">I'm editable</h3>
    <p></p>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.