script.aculo.us Возможность перетаскивания

Опубликовано: 6 Декабря, 2021

Эта опция ограничения перетаскивания script.aculo.us используется для создания массива элементов. Это должно быть родителем, и область перетаскивания будет принимать только их, вы можете перетащить перетаскиваемый элемент в область перетаскивания. В этой области перетаскивания элемент будет помещен, если Containment совпадает с идентификатором родителя вашего перетаскиваемого элемента.

Синтаксис:

 Droppables.add ('элемент', 
    {containment: идентификатор элемента или массив идентификаторов родителей}
);

Ценности:

ID: эта опция принимает идентификатор элемента или массив идентификаторов родителей.

Пример: В этом примере второе изображение принимается областью перетаскивания, причиной этого является родительский элемент для второго изображения, если 'gfg'. Каждый дочерний элемент этого родителя будет принят областью перетаскивания.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < script type = "text/javascript"
        src = "prototype.js" >
    </ script >
     
    < script type = "text/javascript"
        src = "scriptaculous.js" >
    </ script >
     
    < script type = "text/javascript" >
        window.onload = function () {
            $A($('draggables').getElementsByTagName('img'))
                .each(function (item) {
                    new Draggable(item, {
                        revert: true,
                        ghosting: true
                    });
                });
 
            $A($('gfg').getElementsByTagName('img'))
                .each(function (item) {
                    new Draggable(item, {
                        revert: true,
                        ghosting: true
                    });
                });
 
            Droppables.add('droparea', {
                 hoverclass: 'hoverActive',
                 containment: 'gfg',
                 onDrop: moveItem
            });
 
            // Set drop area default non cleared.
            $('droparea').cleared = false;
        }
 
        function moveItem(draggable, droparea) {
            if (!droparea.cleared) {
                droparea.innerHTML = '';
                droparea.cleared = true;
            }
 
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
        }
    </ script >
 
    < style type = "text/css" >
        #draggables {
            width: 550px;
            height: 73px;
        }
 
        #gfg {
            width: 550px;
            height: 73px;
        }
 
        #droparea {
            float: left;
            width: 650px;
            height: 90px;
            border: 2px solid gray;
            text-align: center;
            font-size: 16px;
            padding: 12px;
        }
    </ style >
 </ head >
 
< body >
    < div >
        < h1 style = "color: green" >
            GeeksforGeeks
        </ h1 >
 
        < p >A Computer Science Portal for Geeks</ p >
    </ div >
 
    < strong >
        script.aculo.us Drag & Drop
        Containment Option
    </ strong >
     
    < div id = "draggables" >
        < img src =
 " https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png " >
    </ div >
    < br >< br >
 
    < div id = "gfg" >
        < img src =
 " https://image4.owler.com/logo/geeks-for-geeks_owler_20180809_174139_original.png " >
    </ div >
 
    < br >< br >< br >< br >< br >
    < div id = "droparea" >
        Drag the Image and Drop Your
        Image in this area
    </ div >
 </ body >
 
</ html > 

Выход:

Перед перетаскиванием:

После перетаскивания:

JavaScript

script.aculo.us Возможность перетаскивания

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ