Issues with drag and drop using Sortable on IE

[abhi]

Hi,

I am using the Sortable for drag and drop for the first time and the
drag and drop works great on Firefox, Safari and Chrome but i am
having the following issues on IE.

1) On dragging and dropping an element the element does not get
released from the cursor.

2) On dragging the element to an open position the element does not
snap back to its open position.

I can post the HTML and css if required. Really appreciate help in
this regards

Thanks

Abhi

[david]

Hi Abhi,

If you'll have code, it could be great.
so we can catch the error :))

--
david

[Abhijat Thakur]

Hi David,

Enclosed is the code. When i say element can be dragged to open position i mean that in the sortable area if there is an open position the draggable item can be placed there and it does not snap back to its original position. FF, Chrome and Safari does that. Enclosed is the code. Appreciate the help.

<div class="favorite_bling_reorder_wrapper">
    <div class="favorite_bling_left_section">  </div>
    <div id="favorite_bling_display_id" class="bling_favorite_display">
        <div id="favorite_2131129" class="bling_category_data" style="position: relative;">
            <img id="favorite_bling_22_img" class="bling_img" width="50" height="50" alt="" src="/images/bling1.gif"/>
            <div class="cleardiv"> Bling1 </div>
            <div class="cleardiv">
                <span class="family">user1</span>
            </div>
        </div>
        <div id="favorite_2131129" class="bling_category_data" style="position: relative;">
            <img id="favorite_bling_23_img" class="bling_img" width="50" height="50" alt="" src="/images/bling2.gif"/>
            <div class="cleardiv"> Bling2</div>
            <div class="cleardiv">
                <span class="family">user2</span>
            </div>
        </div>
        <div id="favorite_2131129" class="bling_category_data" style="position: relative;">
            <img id="favorite_bling_24_img" class="bling_img" width="50" height="50" alt="" src="/images/bling3.gif"/>
            <div class="cleardiv"> Bling3</div>
            <div class="cleardiv">
                <span class="family">user3</span>
            </div>
        </div>
        <div id="favorite_2131129" class="bling_category_data" style="position: relative;">
            <img id="favorite_bling_25_img" class="bling_img" width="50" height="50" alt="" src="/images/bling4.gif"/>
            <div class="cleardiv"> Bling4</div>
            <div class="cleardiv">
                <span class="family">user4</span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

     Sortable.create($('favorite_bling_display_id'),{tag:'div',overlap:'horizontal',constraint:false,
         onChange: function(item) {
         },
         onUpdate: function(list) {
             var x = $('favorite_bling_display_id');
             setBlingOrder(Sortable.sequence(x));
            

         }

     });
</script>

<!-- CSS-->

.favorite_bling_reorder_wrapper {
    width:100%;
    text-align:center;
    margin-top: 20px;
}

.favorite_bling_left_section {
    width:10%;
    float:left;
    height:auto;
}

.bling_favorite_display {
    border:1px solid #333333;
    width:80%;
    float:left;
    margin:3px 10px 15px 10px;
}

.bling_category_data {
    float:left;
    margin:3px 20px 10px 10px;
    width:105px;
}

.bling_img {
    border:none;
    height:50px;
    width:50px;
}

.cleardiv {
   margin:3px;
   clear:both;
   height:15px;
   overflow:hidden;
   color:#C1C1C1;

}

--

You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Abhijat Thakur]

Hi,

I changed the code and the behavior is still the same on IE. One more issue that i noticed on IE is that when we drag an item, the only way to release is by double click. When the item gets released  the onUpdate callback is never called.

<div class="favorite_bling_reorder_wrapper">

    <div class="favorite_bling_left_section">  </div>
    <div id="favorite_bling_display_id" class="bling_favorite_display">

        <div id="favorite_101" class="bling_category_data" style="position: relative;">

            <img id="favorite_bling_22_img" class="bling_img" width="50" height="50" alt="" src="/images/bling1.gif"/>
            <div class="cleardiv"> Bling1 </div>
            <div class="cleardiv">
                <span class="family">user1</span>
            </div>
        </div>

        <div id="favorite_102" class="bling_category_data" style="position: relative;">

            <img id="favorite_bling_23_img" class="bling_img" width="50" height="50" alt="" src="/images/bling2.gif"/>
            <div class="cleardiv"> Bling2</div>
            <div class="cleardiv">
                <span class="family">user2</span>
            </div>
        </div>

        <div id="favorite_103" class="bling_category_data" style="position: relative;">

            <img id="favorite_bling_24_img" class="bling_img" width="50" height="50" alt="" src="/images/bling3.gif"/>
            <div class="cleardiv"> Bling3</div>
            <div class="cleardiv">
                <span class="family">user3</span>
            </div>
        </div>

        <div id="favorite_104" class="bling_category_data" style="position: relative;">

            <img id="favorite_bling_25_img" class="bling_img" width="50" height="50" alt="" src="/images/bling4.gif"/>
            <div class="cleardiv"> Bling4</div>
            <div class="cleardiv">
                <span class="family">user4</span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

     Sortable.create($('favorite_bling_display_id'),{tag:'div',overlap:'horizontal',constraint:false,
         onChange: function(item) {
         },
         onUpdate: function(list) {
             var x = $('favorite_bling_display_id');

             alert(Sortable.sequence(x));

- Hide quoted text -

}

.family {
    color:#ffff00;
    font-weight:bold;
}

Thanks

Abhi

On Thu, Dec 17, 2009 at 6:54 AM, david brillard <david.b...@gmail.com> wrote:

Hi,


<div id="favorite_2131129" class="bling_category_data" style="position: relative;"> appear multiple time with SAME id ??
that could at least be something to  modify, I have not tested it for now, but it could help resolving your trouble.

Post back on the GG groups if it did not help, with the code some one could find the problem.
I could depending to your response give a look tomorrow.

--
david

2009/12/17 Abhijat Thakur <abh...@gmail.com>

[Abhijat Thakur]

Hi.

This is fixed. I looked at Zoltan post and i was including prototype.js twice in my page which was breaking on IE. Thanks for all the help.

Abhi