Dreamweaver Ajax Beta - Details :: Drag´n Drop 5x5 How do i do this?

Hi Folks

I am high on this new stuff. Drag´n Drop was so easy to install as a supplement to an old 3.6.5 MXK site. didnt have to be AJAX site at all. 

My question is how to make a drag and drop horisontal looper. I tried, but it seemed to want to <li> instead.

Can somebody point me in the right direction code wise.

Ive seen it done here at Interakts own demosite.

Thanks

Sofus

Hi,

The simple way to do it is to use a style sheet on the li tags. If you put a float: left on the relavant tags you will see what I mean. You can also add width and padding to suit. I would image that is what they have done on their demo.

The best way to do it is to use div with an id then it makes things look cleaner

<div id="porfolio">

<ul><li>image</li><li>image1</li></ul>

</div>

so the css would be #portfolio li { float:left;.....; }

I hope that helps. If you don't understand it you should brush up on the CSS. Tables are dead etc etc.

cheers.

Dave

Hi David

Thanks for the tip. Will try it and return with th eoutcome later

Cheers

Sofus

Hi David :-)

I tried and it displays horizontal, but does not work. It messes up bad and does not function as the Interakt DEMO.

Guys could you maybe help us here by showing us how you did the horizontal drag and drop.

Thanks

Sofus

Hi Sofus,

You need to make sure that the title (category) is spread across the whole page width: 100% and clear:both.

I can assure you this is the method that interakt have used (or something very close). Send the style sheet you created.

david@trafficjockey.com

thanks

Hi guys,

Here is how the code from the demo looks:

<div id="sort_left">
        <div id="<?php echo $DWAjaxDnD1->renderDNDDropZone(""); ?>">
          <h3>Unassigned images</h3>
          <ul id="<?php echo $DWAjaxDnD1->renderDNDDropList(""); ?>" class="no_category">
            <?php if ($totalRows_detail2image_imgNoCat > 0) { // Show if recordset not empty ?>
              <?php do { ?>
                <li id="<?php echo $DWAjaxDnD1->renderDNDItem($row_detail2image_imgNoCat['id_img'], ""); ?>" class="drag_item">
                <?php $path_parts = KT_pathinfo($row_detail2image_imgNoCat['filename_img']);?>
                <img src="ajax_demo/portfolio/thumbnails/<?php echo $path_parts['filename'];  ?>_60x40.<?php echo $path_parts['extension'];  ?>" width="60" height="40" alt="<?php echo $path_parts['filename'];  ?>"/><br/>
                <span class="image_descr"><?php echo $row_detail2image_imgNoCat['description_img']; ?></span>
                </li>
                <?php } while ($row_detail2image_imgNoCat = mysql_fetch_assoc($detail2image_imgNoCat)); ?>
              <?php } // Show if recordset not empty ?>
          </ul>
          <br style="display:block;clear:both"/>
        </div>
        </div>

<div id="separator"></div>
       
        <div id="sort_right">
        <h3>Image categories</h3>
        <ul>
          <?php do { ?>
            <li id="<?php echo $DWAjaxDnD1->renderDNDDropZone($row_master1album_alb['id_alb']); ?>">
              <h4><?php echo $row_master1album_alb['title_alb']; ?></h4>
              <ul id="<?php echo $DWAjaxDnD1->renderDNDDropList($row_master1album_alb['id_alb']); ?>">
                <?php
  if ($totalRows_master1album_alb>0) {
    $nested_query_detail2image_img = str_replace("123456789", $row_master1album_alb['id_alb'], $query_detail2image_img);
    mysql_select_db($database_conn_ajax_demo);
    $detail2image_img = mysql_query($nested_query_detail2image_img, $conn_ajax_demo) or die(mysql_error());
    $row_detail2image_img = mysq

Also, the CSS for the div's, li's and ul's looks like this:

#sortable ul li {
    list-style-type: none;
    margin: 2px;
}

#sort_left {
    margin-left: 0px;
    padding-left: 0px;
    width: 230px;
    float: left;
    margin-top: 10px;
}

#sort_left ul li {
    width: 66px;
    float: left;
}


#sort_right {
    width: 380px;
    float: left;
    margin-top: 10px;
}

#sort_right ul ul {
    clear: both;      
}

#sort_right ul ul li {
    width: 66px;
    float: left;
}

#separator {
    float: left;
    width: 2px;
    height: 420px;
    margin-top: 20px;
    border-right: 1px solid #2C376F;       
    margin-right: 10px;
}

#sort_right h4,
#sort_right ul,
#sort_right li {
    margin:0 !important;
    padding:0 !important;
}

#sort_right h4 {
    height: 20px;
}

#DWAjaxDnD1_dropzone_1_droplist,
#DWAjaxDnD1_dropzone_2_droplist,
#DWAjaxDnD1_dropzone_4_droplist {
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
    width: 100%;
    min-height: 100px;
}

.drag_item {
    width: 85px !important;
    height: 66px !important;
    text-align: center;
}

.drag_suggested_position {
    width: 85px !important;
    height: 64px !important;
}

.drag_proxy {
    text-align: center;
}

#demo_content .editable_textarea {
       width: 150px;
    height: 80px;
    background-color: #ffffd3;
}

I hope it helps.

Marius

Marius, I hate to go off topic, but I have asked about this before, and I still have the problem.   I tried totally rebuilding my entire site thinking there was some old code in it or something... but I never actually thought to just put nothing but an accordion on a page and try it in IE.

If there are more than 2 regions, and more than 2 lines of text in any region after the first two, then when the page first opens in IE, there is a space between the regions that isnt supposed to be there.   This is only in IE under the circumstances I stated here.   Here is a link to a page with nothing but an accordion on it.  please look at it in IE and tell me if I am crazy?  This has been driving me nuts for a week.

http://www.palmiterbenefits.com/about4.php

Thanks Marius!

I can confirm this issue.

Bernd

OK, I heard back from a bunch of InterAKT folks, and I am told that this is a known bug, and they have not been able to come up with a solution yet, although they are working on it.    I was told to use "EXTERNAL FILES" as a solution, but I have no idea what that means?

Neil

Hi David and Marius. Thanks for the help and Code. Will feedback as soon as i have a live working version.

Sofus