Блог

Главная - Вопросы по программированию - Как сделать объекты перетаскиваемыми и удаляемыми

Как сделать объекты перетаскиваемыми и удаляемыми

#javascript #jquery

#javascript #jquery

Вопрос:

Я следовал этому руководству по YT https://www.youtube.com/watch?v=8vs-SF2UWy4amp;t=28s Заранее прошу прощения, если я допустил здесь какие-либо ошибки, я только начал учиться, но мне нужно делать перетаскиваемую и опускаемую мебель, я не могу перемещать предметы

вот код, который я написал

     <div class="wrap">
        <div id="home">
            <div class="image"><img src="A.png" width="200px" alt=""></div>
            <div class="image"><img src="B.PNG" width="240px" alt=""></div>
            <div class="image"><img src="C.PNG" width="250px" alt=""></div>
            <div class="image"><img src="D.PNG" width="210px" alt=""></div>
            <div class="image"><img src="E.PNG" width="290px" alt=""></div>
            <div class="image"><img src="F.PNG" width="240px" alt=""></div>
            <div class="image"><img src="G.PNG" width="250px" alt=""></div>
            <div class="image"><img src="H.PNG" width="220px" alt=""></div>

        </div>
    </div>
     

 <script scr="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"></script>
<script type="text/javascript">
    $(function (){
       $("#home .image").draggable();
    });
</script>

Комментарии:

1. вам необходимо импортировать javascript пользовательского интерфейса jQuery. На данный момент вы импортируете только CSS. Взгляните на это для ссылок на CDN или загрузки

Ответ №1:

Смотрите рабочий пример во фрагменте. Вам нужно включить jQuery before jQuery UI .

     $(function (){
       $(".image").draggable();
    }); 
 .image {
background:yellow;
width:200px;
height:200px;
margin-bottom:1rem;
} 
 <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.min.js"></script>
<div class="wrap">
        <div id="home">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>

Метки: