If you are seeing this message it is likely that the master layout is unavailable. Please contact helpdesk and raise a support case.

BasicsTip

The basic idea consists of two deciding factors; the "image" and the "slot".

The available images section contains all the information about the images where ever they may be in the UI.

Dragging an available image down onto a slot creates an association, updating a hidden field which jQuery then represents in the UI.

Drag & drop componentsTip

In order for the system to capture appropriate imformation about which image has been associated to which slot and create a representative UI several components written in jQuery need to happen:

1. Image carousel

To accommodate a large selection of available images, the element containing all the images requires the class scrollable which will fire the .scrollable plugin (part of jQuery Tools) from within the $(document).ready(function () {...});, ensuring elements for navigation are added either side.

view codeSample HTML code

<div class="prev">
    <a>Scroll left</a>
</div>
<div id="AvailableImgDiv" class="scrollable">
…
</div>
<div class="next">
    <a>Scroll right</a>
</div>

view codeSample jQuery code

//Make stuff scrollable (part of the jQuery-tools)
$('.scrollable').scrollable({
});

2. Available images

Using the jQuery draggable plugin we set-up the draggable images from within the $(document).ready(function () {...});.

view codeSample jQuery code

//Make the images dragabble
$('#AvailableImgList img').draggable({
    stack: '#AvailableImgList img',
    cursor: 'move',
    revert: true,
    opacity: 0.66,
    zIndex: 1001,
    scroll: true,
    scrollSensitivity: 100,
    helper: 'clone',
    appendTo: 'body',
    snap: '#ImgSlots div',
    start: greyMeOut
});

3. Droppable slots

The .droppable plugin (jQuery droppable) targets the elements where dragged images may be dropped, what elements are allowed to dropped and details what function to fire when dropped.

view codeSample jQuery code

//fire an event when the image is dropped
$('#ImgSlots div').droppable({
    accept: '#AvailableImgList img',
    drop: handleDropEvent,
    hoverClass: 'hovered'
});

Remove componentsTip

Once an image has been associated with a slot a remove icon will appear in the top right of the image. Clicking this icon will remove the image association and update the UI accordigly by showing the image in the available images area, removing the exit icon and clearing the associated hidden field. The jQuery click event leverages off of the icon's CSS name .icon-exit16.

view codeSample jQuery code

$('.icon-exit16').click(function () {

    //get the imgID
    delImg = $('input', this).val();
    //get the slotID
    delSlot = $(this).parent().attr('id');

    //remove the value from the hidden field
    $('input', this).val('');

    //animate the picture away
    $('#' + delImg).animate({
        left: '0px',
        top: '0px'
    }).draggable('enable');

    //remove the visual clone
    $('#' + delSlot + ' img').replaceWith('');

    //restore image visually to library
    $('#' + delImg).show();

    //hide the remove button
    $(this).delay('1396').fadeOut('slow');
});