Блог

Я работаю над проектом перетаскивания и столкнулся с небольшой проблемой. Я хочу отключить перетаскиваемый после того, как он был удален на droppable. У меня есть функция, disableDrag , но я получаю сообщение об ошибке в консоли, а затем она регистрируется, но не выполняет функцию. Кто-нибудь знает почему? И есть ли лучший способ сделать это?

Настройка HTML:

 <div class="container">

  <div id="key" class="fragment">
    <div class="key"></div>
  </div>

  <div id="dragonkey" class="fragment">
    <div class="key"></div>
  </div>

  <div id="inventory">
    <div class="slot" id="slot1"></div>
    <div class="slot" id="slot2"></div>
  </div>

</div>
  

Настройка CSS:

 .container{
  width:300px;
  height:300px;
  background-color:#ccc;
}
#key, #dragonkey{
  width:20px;
  height:20px;
  position:absolute !important;
  z-index:999;
  cursor:pointer;
  background-color:DarkGoldenRod;
  transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
#key{
  top:5%;
  left:5%;
}
#dragonkey{
  top:15%;
  left:5%;
}
#inventory{
  width:68px;
  height:68px;
  position:relative;
  float:right;
  margin:5% 5% 0 0;
  transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
.slot{
  border:2px solid #fff;
  width:30px;
  height:30px;
  float:left;
}
#slot1, #slot2{
  background-color:rgba(0,0,0,1);
}

.ui-droppable-active{
  background-color:rgba(184,134,11,0.7) !important;
}
  

Это настройка jQuery:

 // Javascript document

$(document).ready(function() {

  $("#key").draggable({
    containment: ".container"
  });

  $("#dragonkey").draggable({
    containment: ".container"
  });

  $("#slot1").droppable({
    accept: "#key",
    drop: dropAnimate
  });

  $("#slot2").droppable({
    accept: "#dragonkey",
    drop: dropAnimate
  });

  function dropAnimate(event, ui) {

    console.log( $(ui.draggable).attr('id'));

    var $this = $(this);

    var width = $this.width();
    var height = $this.height();
    var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
    var cntrTop = (height / 2) - (ui.draggable.height() / 2);

    ui.draggable.position({
      my: "center",
      at: "center",
      of: $this,
      using: function(pos) {
        $(this).animate(pos, "slow", "linear");
      }
    });
    disableDrag();
  }

  function disableDrag () {
    $(this).draggable({
      disabled: true
    });
    console.log("DISABLED");
  }


}); <!-- END OF DOCUMENT READY -->
  

Вы можете использовать ui.draggable элемент для установки disabled: true :

 ui.draggable.draggable({disabled: true});
  

Проверьте этот пример:

 // Javascript document
$(document).ready(function() {

  $("#key").draggable({
    containment: ".container"
  });

  $("#dragonkey").draggable({
    containment: ".container"
  });

  $("#slot1").droppable({
    accept: "#key",
    drop: dropAnimate
  });

  $("#slot2").droppable({
    accept: "#dragonkey",
    drop: dropAnimate
  });

  function dropAnimate(event, ui) {

    console.log( $(ui.draggable).attr('id'));

    var $this = $(this);

    var width = $this.width();
    var height = $this.height();
    var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
    var cntrTop = (height / 2) - (ui.draggable.height() / 2);

    ui.draggable.position({
      my: "center",
      at: "center",
      of: $this,
      using: function(pos) {
        $(this).animate(pos, "slow", "linear");
      }
    });
    
    ui.draggable.draggable({disabled: true});
  }

}); <!-- END OF DOCUMENT READY -->  

 .container{
  width:300px;
  height:300px;
  background-color:#ccc;
}
#key, #dragonkey{
  width:20px;
  height:20px;
  position:absolute !important;
  z-index:999;
  cursor:pointer;
  background-color:DarkGoldenRod;
  transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
#key{
  top:5%;
  left:5%;
}
#dragonkey{
  top:15%;
  left:5%;
}
#inventory{
  width:68px;
  height:68px;
  position:relative;
  float:right;
  margin:5% 5% 0 0;
  transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
.slot{
  border:2px solid #fff;
  width:30px;
  height:30px;
  float:left;
}
#slot1, #slot2{
  background-color:rgba(0,0,0,1);
}

.ui-droppable-active{
  background-color:rgba(184,134,11,0.7) !important;
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container">

  <div id="key" class="fragment">
    <div class="key"></div>
  </div>

  <div id="dragonkey" class="fragment">
    <div class="key"></div>
  </div>

  <div id="inventory">
    <div class="slot" id="slot1"></div>
    <div class="slot" id="slot2"></div>
  </div>

</div>  

В вашей disableDrag функции this не указывает на перетаскиваемый элемент; он указывает на объект Window . Исправьте это, передав перетаскиваемый элемент функции с disableDrag($this); помощью . Затем добавьте аргумент функции и внутри этой функции измените на . function disableDrag(item) $(this).draggable({disabled: true}) $(item).draggable("option", "disabled", true);

Пример jsFiddle